Tabs 设计文档
标签页，在同一区域内组织并切换多组对等内容。全量对齐 Semi Design：支持 line/card/button/slash 类型、top/left 位置、small/medium/large 尺寸、数据驱动 tabList 或纯声明式 <Tabs.Pane> 自动收集、renderTabBar 自定义标签栏、roving tabindex 键盘导航、可关闭标签、more 收纳与 collapsible 滚动折叠（含 auto 自动检测）。
← API 文档使用建议
标签页，在同一区域内组织并切换多组对等内容。全量对齐 Semi Design：支持 line/card/button/slash 类型、top/left 位置、small/medium/large 尺寸、数据驱动 tabList 或纯声明式 <Tabs.Pane> 自动收集、renderTabBar 自定义标签栏、roving tabindex 键盘导航、可关闭标签、more 收纳与 collapsible 滚动折叠（含 auto 自动检测）。
Accessibility
ARIA role：tablist
- tablist 内每个标签为 role=tab，aria-selected 标记激活，aria-controls 关联面板
- roving tabindex：仅激活标签 tabindex=0，其余 -1
- 对齐 Semi 手动激活：方向键仅移动焦点，Enter/Space 或点击才激活对应面板
- 面板 role=tabpanel；关闭叉为带 aria-label 的原生 button
- 标签溢出时出现前/后滚动箭头（带 aria-label，tabindex=-1 不入 Tab 序），激活标签自动滚到可视区
- more 收纳时溢出标签收进末尾「更多」下拉（aria-haspopup=menu，带 aria-label），激活标签始终保持可见
- renderTabBar 自定义标签栏时由调用方负责无障碍语义（role=tab/aria-selected 等）
- preventScroll=true 时 Tab 聚焦不触发页面滚动
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-tabs-tab-button-bg-active | var(--cd-color-fill-1) | 按钮式页签背景颜色 - 按下 |
--cd-color-tabs-tab-button-bg-hover | var(--cd-color-fill-0) | 按钮式页签背景颜色 - 悬浮 |
--cd-color-tabs-tab-button-selected-bg-default | var(--cd-color-primary-light-default) | 按钮式页签背景颜色 - 选中 |
--cd-color-tabs-tab-button-selected-text-default | var(--cd-color-primary) | 按钮式页签文本颜色 - 选中 |
--cd-color-tabs-tab-button-text-default | var(--cd-color-text-2) | 按钮式页签文本颜色 - 默认 |
--cd-color-tabs-tab-card-bg-active | var(--cd-color-fill-1) | 卡片式页签背景颜色 - 按下 |
--cd-color-tabs-tab-card-bg-hover | var(--cd-color-fill-0) | 卡片式页签背景颜色 - 悬浮 |
--cd-color-tabs-tab-card-border-default | var(--cd-color-border) | 卡片式页签容器底部长线颜色 - 默认 |
--cd-color-tabs-tab-card-selected-bg-default | var(--cd-color-bg-1) | 卡片式页签背景颜色 - 选中 |
--cd-color-tabs-tab-card-selected-indicator-default | var(--cd-color-border) | 卡片式页签选中页签描边 |