CSS: tabs

.instui-tabs — Một tập hợp bảng tab: một danh sách tab, các tab có thể chọn, và các panel của chúng.

Xem các thành viên tabs.tab và tabs.panel để biết các nút tab riêng lẻ và các panel nội dung tương ứng.

Source: panel.css

TIP

Nâng cao JS — CSS của component này tự render và hoạt động độc lập; ghép với @pantoken/interactions để thêm hành vi tương tác. Xem bảng modifier phía dưới.

Khả năng truy cập

Gắn danh sách tab với role="tablist", mỗi tab với role="tab" và aria-selected, và mỗi panel với role="tabpanel".

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";

Các ví dụ

<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">Tổng quan</button>
    <button class="tab" role="tab" aria-selected="false">Hoạt động</button>
  </div>
  <div class="panel" role="tabpanel">Tổng quan dự án</div>
</div>

Cấu trúc

.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)

flowchart TD n0[".instui-tabs"]:::cssdoc-root n1(["list"]):::cssdoc-component n2(["tabs.tab"]):::cssdoc-component n3(["tabs.panel"]):::cssdoc-component n1 -->|0..n| n2 n0 --> n1 n0 -->|0..n| n3 click n1 "/api/css/list.md" click n2 "/api/css/tabs.tab.md" click n3 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa

Bộ sửa	Mô tả
.-overflow-scroll	Giữ danh sách tab trên một dòng và cho phép cuộn ngang thay vì xuống dòng, ẩn thanh cuộn.
.-variant-secondary	Các tab "thư mục" bo tròn với một tab được chọn nối trực quan vào panel phía dưới. @affects tabs.tab — Tái tạo kiểu các nút tab thành giao diện "thư mục" bo tròn.

Phần

Phần	Mô tả
.list	Hàng các tab.

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-tabs-default-background	<color>	#00000000

Các thành phần phụ

• list
• tabs.panel
• tabs.tab