Tabs 设计文档

使用建议

标签页，在同一区域内组织并切换多组对等内容。全量对齐 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
• closable 标签聚焦后 Backspace/Delete 关闭；关闭后焦点转移到后一个标签（末项则转前一个）
• 标签溢出时出现前/后滚动箭头（带 aria-label，tabindex=-1 不入 Tab 序），激活标签自动滚到可视区
• more 收纳时溢出标签收进末尾「更多」下拉（aria-haspopup=menu，带 aria-label），激活标签始终保持可见
• renderTabBar 自定义标签栏时由调用方负责无障碍语义（role=tab/aria-selected 等）
• preventScroll=true 时 Tab 聚焦不触发页面滚动

设计变量