项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

EtTabStrip · 下划线式 tab 条 ​

纯文字 tab 条(对齐 Excel/WPS):roving 漫游、Delete 关闭、窄屏溢出「更多」。

紧凑 24
默认 32
宽松 40

当前 home · 已关闭 —

API ​

import { EtTabStrip } from '@wil-works/evoke-tools-ui'公共工具工具区原子件

Props

名称类型默认说明
modelValueString''激活 tab 的 id
tabsArray必填条目:{ id, label, closable?, disabled? }(M0 不用图标)
overflowLabelString'更多'窄屏溢出入口文案

Emits

事件载荷说明
update:modelValuetab.idv-model(modelValue)的写入
changetab.id选中项切换;载荷 = 新选中条目的 id
closeactive.id, tab.id条目被关闭(点关闭钮或键盘 Delete);载荷 = 被关闭条目的 id
contexttab.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。