माथिल्लो एप बार

अहिले कुन पर्दा खुलेको छ र पछाडि गए कहाँ पुगिन्छ — पर्दाको सिरानमा एक लाइनमा भन्ने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<header class="dc-ab">
  <button class="dc-ab__btn" type="button">
    <span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
  </button>
  <h1 class="dc-ab__title">주문 상세</h1>
  <div class="dc-ab__actions">
    <button class="dc-ab__btn" type="button">
      <span aria-hidden="true">⌕</span><span class="dc-sr">검색</span>
    </button>
    <button class="dc-ab__btn" type="button">
      <span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
    </button>
  </div>
</header>

.dc-ab {
  display: flex; align-items: center; gap: var(--dc-1);
  padding: var(--dc-2);
  padding-top: calc(var(--dc-safe-top) + var(--dc-2));
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-ab__btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-text);
  font-size: 20px; line-height: 1;
  transition: background var(--dc-fast);
}
.dc-ab__btn:active { background: var(--dc-sunken); }
.dc-ab__title {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 0 var(--dc-1);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--dc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-ab__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.dc-ab__spacer { flex: 0 0 auto; width: 44px; height: 44px; }
.dc-ab--center .dc-ab__title { text-align: center; }
.dc-ab__text {
  flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0 var(--dc-3);
  border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-brand-text);
  font-family: inherit; font-size: 15px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ab__text:active { background: var(--dc-brand-soft); }

कसरी प्रयोग गर्ने

शीर्षकमा पर्दाको नाम राख्नुहोस्: 'विवरण' नभई 'अर्डर विवरण'
दायाँपट्टि बढीमा दुई आइकन; त्यसभन्दा बढी भए ⋮ भित्र राख्नुहोस्
पछाडि जाने बटन सधैं बायाँको पहिलो कोठामा — ठाउँ सर्‍यो भने औंला भौंतारिन्छ
मोडलमा खुलेको पर्दामा ‹ नभई ✕ (बन्द) राख्नुहोस्

ध्यान दिनुपर्ने कुरा

padding-top मा --dc-safe-top नजोडे नच/स्टाटस बारले शीर्षक छोप्छ
हरेक आइकन बटनमा dc-sr नाम चाहिन्छ; ⋮ कुनै अर्थमा पढिँदैन
लामो शीर्षक काटिन्छ — थ्री डटमा भर नपरी छोटो शीर्षक छान्नुहोस्

अर्को

तलको ट्याब बार नेभिगेसन एप

ड्रअर मेनु नेभिगेसन एप

सेग्मेन्ट कन्ट्रोल नेभिगेसन एप

स्क्रोल ट्याब नेभिगेसन एप