Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Tab cuộn ngang

Dùng khi số danh mục nhiều hơn chiều rộng màn hình, người dùng quét ngang để chọn.

Điều hướng

Xem trước trực tiếp

Nguồn

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

Cách dùng

  • Tab đầu tiên là tab rộng nhất ("Tất cả") và được chọn sẵn
  • Cuộn tab đang chọn về giữa; chạm tab ngoài cùng bên phải thì tab kế tiếp phải lộ ra
  • Từ năm danh mục trở xuống thì điều khiển phân đoạn phù hợp hơn
  • Tên tab chỉ một, hai từ — tên dài thì một màn hình chỉ thấy hai tab

Điểm cần lưu ý

  • Để tab cuối cùng bị cắt hờ để thấy còn nữa; cắt gọn đúng mép khiến người ta tưởng đã hết
  • Đã ẩn thanh cuộn thì mọi tab phải là link hoặc button thật, cho người dùng bàn phím
  • Bỏ --dc-safe-top là tab trượt xuống dưới tai thỏ

Tiếp theo