# Tabs 标签页标签式内容切换，支持键盘方向键导航；未激活面板通过 `hidden` 隐藏。`oas-tabs` + `oas-tab-panel` 配套使用。 ## 基础用法

内容一：基础信息展示。

内容二：更多详情。

内容三：其他补充说明。

## 默认选中

内容一

内容二

默认选中内容三

## 富内容面板

提交

取消

已启用

待处理

## 卡片式

内容一：卡片式标签带边框，激活标签与面板连通，四边有线。

内容二：更多详情。

内容三：其他补充说明。

通过 `type="card"` 切换为卡片式：每个标签带独立边框，激活标签底边与面板背景同色（连通无断线），整体四边有线包裹。 ## 切换事件

内容一

内容二

当前激活：a ## 可关闭 `closable`：每个标签右侧显示关闭 ×（`span[tabindex="-1"]`，读屏经 `aria-label` 命名，Enter / Space 触发关闭）。点击 × 派发 `oas-close`，`detail: { key }`；组件不自动删除面板，交由宿主移除（移除后标签栏增量刷新）。

内容一

内容二

内容三

> 关闭非激活标签：标签立即消失（可见反馈）。关闭激活标签：自动切到剩余第一个标签，并弹出消息提示。 ## 右键菜单（新建 + 批量关闭） `context-menu`：右键任意标签弹出操作菜单——新建 / 关闭 / 关闭其他 / 关闭左侧所有 / 关闭右侧所有 / 关闭全部（新建与关闭族间有分隔线）。新建派发 `oas-add`（与 `addable` 的 + 按钮同一契约，`detail.label` 是 locale 默认产物名，宿主可忽略自行命名——实际场景多为「新建文件」等宿主语义，菜单项文案保持中性「新建」）；关闭类每项按目标集合逐个派发 `oas-close`（`detail: { key }`），宿主按 key 移除对应面板即可（与 `closable` 同一契约）。弹层支持外部点击 / Escape 关闭。 ## 标签级右键事件（宿主自建菜单） `oas-tab-contextmenu`：右键某个标签（或聚焦标签按 Menu 键 / Shift+F10）时派发——可取消事件，`detail: { value, index, clientX, clientY, originalEvent }`。宿主 `preventDefault()` 时内建菜单（`context-menu` 属性）与浏览器默认菜单全抑止，宿主可拿 `value` 回查自身数据、拿 `clientX/clientY` 弹 `oas-context-menu` 自建菜单（如文件类操作的「复制路径 / 在文件管理器中打开」）；不拦截时内建菜单照常。空白处右键不派发；键盘触发坐标取按钮中心。与 `context-menu` 属性无关——无论内建菜单是否开启，事件都派发。注：键盘路径只服务宿主自建菜单（内建菜单的唤出通道是鼠标右键）。

仪表盘内容

订单内容

商品内容

用户内容

设置内容

> 右键「商品」试试「新建」与「关闭左侧所有」/「关闭其他」——新建派发 `oas-add` 宿主追加面板；关闭按 key 逐个派发 `oas-close`，宿主移除对应面板。 > 该交互属于 manager 能力包：主路径 `@oas-ui/ui/navigation/tabs` 已默认内含该能力（全量入口与 CDN 导航族包同样内含），无需显式 import。若只想保留纯切换/关闭/溢出的轻量基线，可改从纯核入口 `@oas-ui/ui/navigation/tabs/core` 引入——它不含 manager 能力，此时用到该交互配置会 dev 告警提示显式 import `@oas-ui/ui/navigation/tabs/manager` 或换回主路径。 > 宿主可按业务改文案（如「新建文件」）：覆盖 locale 个别键即可——`setLocale({ name: 'zh-CN', messages: { ...zhCN.messages, 'tabs.ctxNew': '新建文件' } })`（`setLocale` 从 `@oas-ui/i18n` 导入、`zhCN` 从 `@oas-ui/i18n/zh-CN` 导入；同名注册即覆盖，只动需要的键）。 ## 徽标 `oas-tab-panel` 的 `badge` 属性在标签标题旁渲染徽标（数字或文本）。

内容一：徽标展示数量。

内容二：徽标也可以显示文本。

内容三：无徽标。

## 动态增删标签 `addable`：标签栏末尾显示 + 按钮（`aria-label` 走 locale），点击派发 `oas-add`（`detail: { label }`，默认新标签文案「新标签」走 locale，宿主可直接使用或自定义）。组件不自动新增面板，宿主监听 `oas-add` 追加 `oas-tab-panel` 即可，标签栏增量刷新；配合 `closable` 可同时增删。新增后选中态与键盘焦点（roving tabindex）自动落到新标签；关闭激活标签后焦点落到剩余选中标签。

内容一：点 × 关闭，点 + 新增。

内容二：可继续增删。

## 图标标签 `oas-tab-panel` 的 `icon` 属性：标签标题前渲染图标（复用 `oas-icon` 图标集），图标 + 文字组合。也支持在面板内放一个 `slot="icon"` 的直接子元素作为自定义图标（emoji / SVG 等）。

内容一：icon 属性渲染图标。

内容二：图标 + 文字组合。

内容三。

🚀

内容四：slot="icon" 自定义图标。

## 标签位置 `tab-position`：`top`（默认，标签横向一排、内容在下方）/ `left`（标签纵排左侧、内容在右）/ `right` / `bottom`。

内容一：标签纵向排列在左侧，内容在右侧。

内容二

内容三

内容一：标签纵向排列在右侧，内容在左侧。

内容二

内容三

内容一：标签横向排列在下方，内容在上方。

内容二

内容三

## 禁用标签 `oas-tab-panel` 加 `disabled` 禁用单个标签：不可聚焦/不可点、`aria-disabled`、视觉降饱和，键盘方向键自动跳过。

内容一：可正常切换。

内容二：此标签被禁用。

内容三：方向键会跳过中间的禁用标签。

## 尺寸档位 `size`：`xs / small / medium（默认）/ large / xl` 五档，字号与内边距随档位变化。

small 档

内容

medium 档

内容

large 档

内容

## 居中与均分 `centered`：标签栏整体居中；`justified`：标签均分占满整行宽度。

内容一：标签栏居中。

内容二

内容三

内容一：标签均分占满整行。

内容二

内容三

## 溢出滚动标签过多超出容器宽度时，标签栏自动可横向滚动并显示左右箭头（`tab-position="left/right"` 时为纵向滚动 + 上下箭头），鼠标滚轮也可横向滑动标签。`without-scroll-controls` 可关闭箭头（仅保留滚动）。新增/激活的标签会自动滚动到可见区域（不会在溢出时藏在最右）；`addable` 的 + 按钮固定在标签栏末尾，不随标签滚动被遮挡。

内容 {{ i }}

`scroll-position`：激活/新增标签滚动到可见区时的对齐位置——`auto`（默认 nearest，最小滚动）/ `start` / `center` / `end`。

内容 {{ i }}

## 更多收缩下拉 `more`：溢出时标签栏可横向滚动（滚轮/拖拽），末尾「更多」下拉列出**当前滚动视口之外**的标签作快捷跳转（标签全部渲染不隐藏，通用的滚动+镜像做法）；视口外项较多时下拉顶部带搜索框可实时过滤；点选下拉项平滑滚动到可见区（激活项与相邻项因连续排布自然一起进入视口）。新增/激活的标签会自动平滑滚动到可见区域。

内容 {{ i }}

## 面板显隐策略 `panel-mode`：`keep`（默认，未激活面板 `hidden` 保留 DOM）/ `lazy`（未访问的面板内容不挂载，首次激活才渲染，之后常驻）/ `destroy`（切换即卸载非激活面板内容）。重内容面板（图表/编辑器）用 lazy/destroy 避免未激活面板持续占用资源。

lazy：未访问的面板内容暂不挂载。

切到我才首次渲染。

destroy：切走即卸载我的内容。

切回时重新挂载。

## 手动激活 `activation="manual"`：方向键只移动焦点不切换面板，Enter / Space 才切换（无障碍手动激活模式，适合面板内容重、切换代价高的场景）。默认 `auto`（方向键立即切换）。

内容一：方向键移动焦点，Enter/Space 才切换。

内容二

内容三

## 切换动画 `animated`：标签选中态过渡 + 面板淡入动画（只动 color/border/opacity，不碰 layout）。

内容一：切换有过渡动画。

内容二

内容三

## 切换前拦截 `oas-before-change` 事件（cancelable）：切换前派发，`detail: { value }`；宿主 `preventDefault()` 可拦截本次切换（点击与键盘均生效）。适合「有未保存修改时阻止切换」场景。

有未保存修改（勾选后切换被拦截）

内容一：勾选上方复选框后再切换会被拦截。

内容二

内容三

## 可编辑重命名 `oas-tab-panel` 加 `editable`：双击标签进入输入框编辑态，Enter 确认（派发 `oas-rename`，`detail: { value, label }`，组件自动写回新 label）/ Esc 取消 / 失焦保存（内容未变则静默退出）。 > 该交互属于 manager 能力包：主路径 `@oas-ui/ui/navigation/tabs` 已默认内含该能力（全量入口与 CDN 导航族包同样内含），无需显式 import。若只想保留纯切换/关闭/溢出的轻量基线，可改从纯核入口 `@oas-ui/ui/navigation/tabs/core` 引入——它不含 manager 能力，此时用到该交互配置会 dev 告警提示显式 import `@oas-ui/ui/navigation/tabs/manager` 或换回主路径。

内容一：双击我的标签可重命名。

内容二

内容三：此标签不可重命名。

## 拖拽排序 `sortable`：标签可拖拽换位（原生 HTML5 拖拽）。落点后派发 `oas-reorder`，`detail: { fromIndex, toIndex }`；组件不自动移动 DOM，宿主据此重排 `oas-tab-panel` 顺序。 > 该交互属于 manager 能力包：主路径 `@oas-ui/ui/navigation/tabs` 已默认内含该能力（全量入口与 CDN 导航族包同样内含），无需显式 import。若只想保留纯切换/关闭/溢出的轻量基线，可改从纯核入口 `@oas-ui/ui/navigation/tabs/core` 引入——它不含 manager 能力，此时用到该交互配置会 dev 告警提示显式 import `@oas-ui/ui/navigation/tabs/manager` 或换回主路径。

内容一：拖拽标签可换位。

内容二

内容三

内容四

## 嵌套标签页 `oas-tab-panel` 内可再嵌套 `oas-tabs`，内外层独立管理各自的选中态（外层只识别直接子面板，不抓内层面板）。

外层内容：概览。

内层内容：基本信息。

内层内容：高级设置。

## 自定义标签内容 `oas-tab-panel` 内放一个 `slot="label"` 的直接子元素，可完全自定义标签内容（富文本/图标组合等），fallback 到 `label` 属性纯文本。该元素不被面板默认插槽投影，专供标签位使用。

内容一：默认文本标签。

VIP 会员

内容二：自定义富文本标签。

● 紧急

内容三：带状态点的标签。

## 悬停切换 `trigger="hover"`：悬停标签即切换（默认 `click`）。disabled 标签悬停不触发。

内容一：悬停标签即切换。

内容二

内容三

## 取消激活 `allow-deactivation`：点击当前激活标签取消其激活（进入无选中态）；默认重复点击已激活标签保持激活。

内容一：再点一次当前标签可取消激活。

内容二

## 图标堆叠与纯图标 `stacked`：图标在上、文字在下（纵向堆叠）。`icon-only`（oas-tab-panel）：纯图标标签无文字（label 提供 aria-label 兜底可访问名称）。

内容一：图标上文字下。

内容二

内容三

内容一：纯图标标签（悬停看 tooltip 语义靠 aria-label）。

内容二

内容三

## 指示线定制激活指示线（line 模式 ::after）走 CSS 变量开口：`--oas-tabs-indicator-color`（颜色）、`--oas-tabs-indicator-size`（厚度）。`hide-indicator` 直接隐藏指示线。

内容一：自定义指示线颜色与厚度。

内容二

内容一：隐藏激活指示线。

内容二

## 选中防抖 `reserve-selected-space`：选中标签文字加粗时预载宽度，选中/未选中标签宽度一致、切换不抖动（选中态 font-weight 500 不撑宽）。

内容一：切换标签宽度不抖动。

内容二

内容三

## 链接标签 `oas-tab-panel` 设 `href`：该标签渲染为 `` 链接（锚点语义：右键新窗口/中键打开/SEO 可爬），搭配 `target`/`rel`。适合标签即页面路由的场景。

内容一：我是链接，可右键新窗口打开。

内容二：外链新窗口。

内容三：无 href 仍是普通标签。

## 纯导航模式 `hide-content`：只渲染标签栏、不渲染面板区——tabs 当导航条用（切换只派发 `oas-change`，内容/路由由宿主接管）。

上方只有标签栏，无面板区；切换只发事件，内容由宿主接管。

## 数据驱动 `items`：JSON 数组数据驱动渲染（与 `oas-tab-panel` 子元素并存时 items 优先）。每项支持 `label / value / icon / badge / disabled / href / target / rel / closable / editable / iconOnly`。

## 操作区插槽 `slot="actions"` 在标签栏右侧渲染操作区：容器固定在 nav 内、滚动区之外，标签溢出滚动时操作区不随标签被遮挡（与新增按钮同一固定惯例）；开启 `addable` 时操作区位于 + 按钮之后。无内容时不占位。

订单列表内容。

物流跟踪内容。

刷新

## tabindex 透传 `tabindex` 在场时透传到全部标签钮（覆盖缺省 roving 策略：仅选中钮 `0`、其余 `-1`），宿主接管焦点管理时可用 `tabindex="-1"` 让标签钮退出 Tab 序（点击 / 方向键切换不受影响）；移除属性即恢复 roving。disabled 标签恒 `-1` 不可聚焦。

按 Tab 不会停在标签上（宿主接管焦点管理场景）。

内容二。