CSS: tabs ​

.instui-tabs — 一組分頁面板：一個分頁列、可選的分頁，以及它們的面板。

請參見 tabs.tab 與 tabs.panel 成員，了解各個分頁按鈕及其內容面板。

Source: panel.css

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙 ​

為分頁列設定 role="tablist"，每個分頁設定 role="tab" 與 aria-selected，且每個面板設定 role="tabpanel"。

使用方法 ​

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

範例 ​

html
<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">概覽</button>
    <button class="tab" role="tab" aria-selected="false">活動</button>
  </div>
  <div class="panel" role="tabpanel">專案總覽</div>
</div>

結構 ​

text
.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;

修飾器 ​

修飾器說明
.-overflow-scroll將分頁列維持在同一行，讓其以水平捲動方式顯示而不是換行，並隱藏捲軸。
.-variant-secondary圓角的「資料夾」分頁，選取的分頁在視覺上與下方面板相連。 @affects tabs.tab — 將分頁按鈕重新樣式化為圓角的「資料夾」外觀。

部件 ​

部件說明
.list分頁列。

已使用的代幣 ​

Token型別值
--instui-component-tabs-default-background<color>#00000000

子元件 ​