Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

App bar atas

Satu baris di puncak layar yang menyatakan sedang melihat apa dan tombol kembali menuju ke mana.

Navigasi

Pratinjau langsung

Sumber

<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); }

Cara memakainya

  • Beri nama layarnya, bukan polanya: "Detail pesanan", bukan cuma "Detail"
  • Maksimal dua ikon di kanan; sisanya masuk ke menu ⋮
  • Kembali selalu di slot pertama sebelah kiri — posisi yang bergeser membuat jempol mencari
  • Layar yang muncul sebagai modal ditutup dengan ✕, bukan ‹

Hal yang perlu diwaspadai

  • Tanpa --dc-safe-top pada padding-top, notch menelan judulnya
  • Setiap tombol ikon butuh nama dalam dc-sr; ⋮ tidak terbaca apa pun
  • Judul panjang terpotong — pilih judul pendek daripada mengandalkan elipsis

Berikutnya