# 标签页 Tabs

分类：导航 · React：Tabs

切换同一处的几块内容；墨线滑到选中项。

## 示例
```html
<div class="xxd-tabs" data-xxd-tabs>
  <button role="tab" id="t1" aria-controls="p1" aria-selected="true">写作</button>
  <button role="tab" id="t2" aria-controls="p2">记录</button>
</div>
<div id="p1">…</div><div id="p2">…</div>
```

## 属性与类名
- 类名：`xxd-tabs` `xxd-tabs__ink` `xxd-tabpanel` `xxd-count`

## JS
```js
list.addEventListener("xxd:change", (e) => e.detail.value)
```

## 键盘与读屏
- role=tablist / tab / tabpanel 由 JS 补齐，选中项 aria-selected，面板 aria-labelledby
- ← → Home End 切换，Tab 只停在选中的那一个（roving tabindex）

## 规则
- 基线上的文字 + 滑动的短墨线
- 选中改颜色不加粗
- tab 下面不再画第二条线
- 放不下时两端渐隐，选中项自动滚进视野