EtTabStrip · 下划线式 tab 条
纯文字 tab 条(对齐 Excel/WPS):roving 漫游、Delete 关闭、窄屏溢出「更多」。
紧凑 24
开始
插入
数据
审阅
视图
帮助
更多0
默认 32
开始
插入
数据
审阅
视图
帮助
更多0
宽松 40
开始
插入
数据
审阅
视图
帮助
更多0
当前 home · 已关闭 —
API
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | String | '' | 激活 tab 的 id |
| tabs | Array | 必填 | 条目:{ id, label, closable?, disabled? }(M0 不用图标) |
| overflowLabel | String | '更多' | 窄屏溢出入口文案 |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
| update:modelValue | tab.id | v-model(modelValue)的写入 |
| change | tab.id | 选中项切换;载荷 = 新选中条目的 id |
| close | active.id, tab.id | 条目被关闭(点关闭钮或键盘 Delete);载荷 = 被关闭条目的 id |
| context | tab.id, event | 条目被右键;载荷 = (条目 id, 原生 MouseEvent)——菜单内容由产品给 |
键盘 · 可访问名 · 密度
| 键盘 | Delete组字守卫 |
|---|---|
| 可访问名 | aria-disabledaria-hiddenaria-labelaria-selectedrole=tablistrole=tab |
| 密度 | --et-chrome-tabstrip-height--et-chrome-tabstrip-underline-height--et-density-base-font--et-density-caption-font--et-density-line-height--et-toolbtn-fg |
行为
- ARIA 只有
tablist/tab/aria-selected;不渲染 tabpanel,激活态由消费方自己渲染。 - 键盘:左右 / Home / End 漫游并把焦点落到对应 DOM;Delete 关闭当前可关闭条目。
- 溢出:ResizeObserver 量容器宽,尾部条目收进「更多」下拉;观察器卸载时断开。
- 同文件导出纯函数
planOverflow(widths, available, { gap, moreWidth }),返回{ visible, overflow }(条目下标划分)。 - 关闭钮
tabindex="-1"不进 Tab 序列,aria-label满足 G4。 - 暴露
measure()。
令牌与门禁
- 度量与
EtDocumentTabs逐项共用(同槽位视觉一致)。 - G5:Delete 判
isImeComposing。 - 内存预算:观察器必须 disconnect。