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

Tab gulir

Untuk kategori yang lebih banyak daripada lebar layar, sehingga orang menggeser ke samping untuk memilih.

Navigasi

Pratinjau langsung

Sumber

<nav class="dc-st" aria-label="카테고리">
  <ul class="dc-st__track">
    <li><a class="dc-st__tab" href="#" aria-current="page">추천</a></li>
    <li><a class="dc-st__tab" href="#">신상품</a></li>
    <li><a class="dc-st__tab" href="#">인기순</a></li>
    <li><a class="dc-st__tab" href="#">할인중</a></li>
    <li><a class="dc-st__tab" href="#">리뷰 많은</a></li>
    <li><a class="dc-st__tab" href="#">빠른 배송</a></li>
    <li><a class="dc-st__tab" href="#">브랜드관</a></li>
  </ul>
</nav>
.dc-st {
  padding-top: var(--dc-safe-top);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-st__track {
  display: flex; align-items: stretch; gap: var(--dc-1);
  padding: 0 var(--dc-3);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.dc-st__track::-webkit-scrollbar { display: none; }
.dc-st__track > li { flex: 0 0 auto; display: flex; }
.dc-st__tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--dc-1);
  min-height: 48px; padding: 0 var(--dc-3);
  border-bottom: 2px solid transparent;
  color: var(--dc-text-mute); text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: color var(--dc-fast), border-color var(--dc-fast);
}
.dc-st__tab[aria-current="page"] {
  color: var(--dc-text); font-weight: 800;
  border-bottom-color: var(--dc-brand);
}
.dc-st__num {
  min-width: 18px; padding: 0 5px;
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.dc-st__tab[aria-current="page"] .dc-st__num {
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
}
.dc-st--pill .dc-st__track { padding: var(--dc-2) var(--dc-3); gap: var(--dc-2); }
.dc-st--pill .dc-st__tab {
  min-height: 44px; padding: 0 var(--dc-4);
  border-bottom: 0; border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
}
.dc-st--pill .dc-st__tab[aria-current="page"] {
  background: var(--dc-brand); color: var(--dc-text-on);
}

Cara memakainya

  • Jadikan tab pertama yang paling luas ("Semua") dan terpilih secara bawaan
  • Gulirkan tab terpilih ke tengah; menyentuh tab paling kanan harus memunculkan tab berikutnya
  • Dengan lima kategori atau kurang, kontrol tersegmen lebih tepat
  • Nama tab satu atau dua kata — nama panjang menyisakan ruang untuk dua tab saja

Hal yang perlu diwaspadai

  • Biarkan tab terakhir terpotong sedikit sebagai isyarat masih ada lagi; tepi yang rapi terbaca sebagai akhir
  • Scrollbar disembunyikan, jadi setiap tab harus benar-benar link atau button untuk pengguna keyboard
  • Hilangkan --dc-safe-top dan tab menyelip di bawah notch

Berikutnya