Tabs 标签页
标签式内容切换，支持键盘方向键导航；未激活面板通过 hidden 隐藏。oas-tabs + oas-tab-panel 配套使用。
基础用法
基础用法
内容一：基础信息展示。
内容二：更多详情。
内容三：其他补充说明。
默认选中
active 指定
内容一
内容二
默认选中内容三
富内容面板
富内容
卡片式
卡片式标签
内容一：卡片式标签带边框，激活标签与面板连通，四边有线。
内容二：更多详情。
内容三：其他补充说明。
通过 type="card" 切换为卡片式：每个标签带独立边框，激活标签底边与面板背景同色（连通无断线），整体四边有线包裹。
切换事件
oas-change 事件
内容一
内容二
可关闭
closable：每个标签右侧显示关闭 ×（span[tabindex="-1"]，读屏经 aria-label 命名，Enter / Space 触发关闭）。点击 × 派发 oas-close，detail: { key }；组件不自动删除面板，交由宿主移除（移除后标签栏增量刷新）。
可关闭标签
内容一
内容二
内容三
关闭非激活标签：标签立即消失（可见反馈）。关闭激活标签：自动切到剩余第一个标签，并弹出消息提示。
徽标
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。
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 的 + 按钮固定在标签栏末尾，不随标签滚动被遮挡。
溢出滚动
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 7
内容 8
内容 9
内容 10
内容 11
内容 12
关闭滚动箭头
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 7
内容 8
内容 9
内容 10
内容 11
内容 12
scroll-position：激活/新增标签滚动到可见区时的对齐位置——auto（默认 nearest，最小滚动）/ start / center / end。
激活滚动居中
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 7
内容 8
内容 9
内容 10
内容 11
内容 12
更多收缩下拉
more：溢出时标签栏可横向滚动（滚轮/拖拽），末尾「更多」下拉列出当前滚动视口之外的标签作快捷跳转（标签全部渲染不隐藏，通用的滚动+镜像做法）；视口外项较多时下拉顶部带搜索框可实时过滤；点选下拉项平滑滚动到可见区（激活项与相邻项因连续排布自然一起进入视口）。新增/激活的标签会自动平滑滚动到可见区域。
更多收缩下拉
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 7
内容 8
内容 9
内容 10
内容 11
内容 12
面板显隐策略
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 或失焦取消。
可编辑重命名
内容一：双击我的标签可重命名。
内容二
内容三：此标签不可重命名。
拖拽排序
sortable：标签可拖拽换位（原生 HTML5 拖拽）。落点后派发 oas-reorder，detail: { fromIndex, toIndex }；组件不自动移动 DOM，宿主据此重排 oas-tab-panel 顺序。
拖拽排序
内容一：拖拽标签可换位。
内容二
内容三
内容四
嵌套标签页
oas-tab-panel 内可再嵌套 oas-tabs，内外层独立管理各自的选中态（外层只识别直接子面板，不抓内层面板）。
嵌套标签页
外层内容：概览。
内层内容：基本信息。
内层内容：高级设置。
自定义标签内容
oas-tab-panel 内放一个 slot="label" 的直接子元素，可完全自定义标签内容（富文本/图标组合等），fallback 到 label 属性纯文本。该元素不被面板默认插槽投影，专供标签位使用。
自定义标签内容
内容一：默认文本标签。
内容二：自定义富文本标签。
内容三：带状态点的标签。
悬停切换
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：该标签渲染为 <a> 链接（锚点语义：右键新窗口/中键打开/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。
数据驱动
API
oas-tabs
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
activation | 键盘激活模式：auto（默认，方向键立即切换）/ manual（方向键只移焦点，Enter/Space 才切换，a11y 手动激活） | string | auto |
active | 激活标签的 value | string | — |
addable | 标签栏末尾显示 + 按钮，点击派发 oas-add（组件不自动新增面板） | boolean | — |
allow-deactivation | 允许点击当前激活标签取消激活（无选中态）；默认重复点击已激活标签保持激活 | boolean | — |
animated | 选中态过渡 + 面板淡入动画（只动 color/border/opacity，不碰 layout） | boolean | — |
centered | 标签栏整体居中（横向时） | boolean | — |
closable | 每个标签显示关闭 ×，点击派发 oas-close（组件不自动删除） | boolean | — |
hide-content | 纯导航模式：渲染标签栏但不渲染面板区（tabs 当导航条，宿主接管内容/路由） | boolean | — |
hide-indicator | 隐藏激活指示线（line 模式的 ::after 下划线） | boolean | — |
items | 数据驱动渲染：JSON 数组 [{ label, value, icon?, badge?, disabled?, href?, target?, rel?, closable?, editable?, iconOnly? }]，与 oas-tab-panel 子元素并存时 items 优先 | string | — |
justified | 标签均分占满标签栏宽度 | boolean | — |
more | 溢出收缩为「更多」下拉（替代滚动箭头，二者互斥）；放不下的标签收进下拉，选中项被收起时更多按钮高亮 | boolean | — |
panel-mode | 面板显隐策略：keep（默认，hidden 保留 DOM）/ lazy（未访问的未激活面板不挂载，首次激活才渲染）/ destroy（切换即卸载非激活面板内容） | string | keep |
reserve-selected-space | 选中加粗防抖：预载选中态文字宽度，选中/未选中标签宽度一致、切换不抖动 | boolean | — |
scroll-position | 激活标签滚动定位策略：auto（默认 nearest）/ start / center / end（激活/新增标签滚动到可见时的对齐位置） | string | auto |
size | 标签档位：xs/small/medium/large/xl（默认 medium），字号/内边距随档位；非法值回落 medium 并告警 | string | medium |
sortable | 标签可拖拽换位（原生 HTML5 DnD），落点后派发 oas-reorder（宿主据此重排面板数据，组件不自动移动 DOM） | boolean | — |
stacked | 图标在上、文字在下（纵向堆叠标签） | boolean | — |
tab-position | 标签栏位置：top（默认）/ left / right / bottom | string | top |
trigger | 切换触发方式：click（默认）/ hover（悬停即切换，disabled 不触发） | string | click |
type | 样式变体：line（下划线，默认）/ card（卡片式） | string | line |
without-scroll-controls | 关闭溢出时的左右/上下滚动箭头（默认溢出自动显示箭头） | boolean | — |
| 事件 | 说明 |
|---|---|
oas-add | 点击 + 新增按钮，detail: { label }（默认新标签文案「新标签」走 locale，宿主自定义或直接使用） |
oas-before-change | 切换前派发（cancelable），detail: { value }；宿主 preventDefault() 可 veto 本次切换（点击/键盘均生效；宿主直接 setAttribute 不触发） |
oas-change | 切换，detail: { value } |
oas-close | 点击标签关闭 ×，detail: { key }（key 为该标签 value，组件不自动移除） |
oas-rename | editable 标签双击重命名确认（Enter），detail: { value, label }；组件自动把新 label 写回面板，宿主可据此持久化 |
oas-reorder | sortable 拖拽换位后派发，detail: { fromIndex, toIndex }；宿主据此重排 oas-tab-panel 顺序（组件不自动移动 DOM） |
| 名称 | 说明 |
|---|---|
| 默认 | — |
oas-tab-panel
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
badge | 标签标题旁的徽标（数字或文本） | — | — |
disabled | 禁用该标签：不可聚焦/不可点、aria-disabled、视觉降饱和，键盘导航跳过 | — | — |
editable | 标签可双击重命名：双击进入输入框编辑态，Enter 确认（派发 oas-rename）/ Esc 取消 | — | — |
href | tab 渲染为链接：该标签渲染为 <a>（锚点语义：右键新窗口/中键打开/SEO 可爬），搭配 target/rel | — | — |
icon | 标签标题前的图标名（复用 oas-icon 图标集，如 mail） | — | — |
icon-only | 纯图标标签：只渲染图标无文字（需 label 提供 aria-label 兜底可访问名称） | — | — |
label | 标签文本 | — | — |
rel | 链接 rel（仅 href 时生效，如 noopener） | — | — |
target | 链接 target（仅 href 时生效，如 _blank） | — | — |
value | 标签值 | — | — |
| 名称 | 说明 |
|---|---|
| 默认 | — |
键盘：聚焦标签列表后 ← / → / ↑ / ↓ 循环切换；关闭按钮聚焦后 Enter / Space 触发关闭。oas-tab-panel 声明 hidden 属性隐藏未激活面板（内容保留在 DOM）。