CSS: tabs ​

.instui-tabs — 选项卡面板集：一个选项卡列表、可选择的选项卡及其面板。

请参阅 tabs.tab 和 tabs.panel 成员，了解各单独选项卡按钮及其内容面板。

Source: panel.css

TIP

JS 增强 — 该组件的 CSS 可独立渲染与工作；将其与 @pantoken/interactions 配对可添加交互行为。参见下方的 modifier table。

无障碍 ​

为选项卡列表设置 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

子组件 ​