标签页 Tabs

在同一区域内切换几组平级内容。

下划线标签

用于内容区块内的分类切换（服务地区、产品类型）。

examples/tabs/underline.html

分段标签

更紧凑，适合 2–4 个短选项（计费周期、视图切换）。

examples/tabs/segmented.html

结构

<div data-cb-tabs>
  <div role="tablist" aria-label="支付覆盖地区">
    <button type="button" role="tab" aria-selected="true" aria-controls="panel-asia"
            class="… aria-selected:border-navy aria-selected:text-navy">亚太</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="panel-europe" class="…">欧洲</button>
  </div>
  <div role="tabpanel" id="panel-asia">…</div>
  <div role="tabpanel" id="panel-europe" hidden>…</div>
</div>

选中样式全部写成 aria-selected:* 工具类，脚本只负责维护 aria-selected、tabindex 与面板的 hidden。

键盘	结果
← →	切换到上一个 / 下一个标签（跳过禁用项）
Home End	第一个 / 最后一个
Tab	从标签移到面板内容

切换时派发 cb:tab-change，detail = { index, tab, panel }；JS 切换：CbtisUI.selectTab(tabElement)。

使用建议

推荐

• 标签文案 2–6 个字，数量不超过 6 个；移动端横向滚动（overflow-x-auto no-scrollbar）
• 需要显示数量时用弱化的数字：<span class="text-xs text-muted-foreground">6</span>

避免

• 用标签页表示有先后顺序的步骤——请用步骤条
• 切换标签时跳转页面（那是导航，用链接）

无障碍

• tablist 需要 aria-label
• 面板自动获得 tabindex="0" 与 aria-labelledby

与 v2 的差异

v2 现状	规范
RegionTabs 有 ARIA 属性但不支持方向键	完整键盘支持
FillTabsBar 用分段标签表示填写步骤	分段标签只用于平级内容；步骤用步骤条