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 属性在标签标题旁渲染徽标(数字或文本)。
带徽标的标签
内容一:徽标展示数量。
内容二:徽标也可以显示文本。
内容三:无徽标。
标签位置
tab-position:top(默认,标签横向一排、内容在下方)/ left(标签纵排左侧、内容在右)/ right / bottom。
left 纵向标签
内容一:标签纵向排列在左侧,内容在右侧。
内容二
内容三
right 纵向标签
内容一:标签纵向排列在右侧,内容在左侧。
内容二
内容三
bottom 标签在下方
内容一:标签横向排列在下方,内容在上方。
内容二
内容三
API
oas-tabs
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active | 激活标签的 value | string | — |
closable | 每个标签显示关闭 ×,点击派发 oas-close(组件不自动删除) | boolean | — |
tab-position | 标签栏位置:top(默认)/ left / right / bottom | string | top |
type | 样式变体:line(下划线,默认)/ card(卡片式) | string | line |
| 事件 | 说明 |
|---|---|
oas-change | 切换,detail: { value } |
oas-close | 点击标签关闭 ×,detail: { key }(key 为该标签 value,组件不自动移除) |
| 名称 | 说明 |
|---|---|
| 默认 | — |
oas-tab-panel
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
badge | 标签标题旁的徽标(数字或文本) | — | — |
hidden | — | — | — |
label | 标签文本 | — | — |
value | 标签值 | — | — |
| 名称 | 说明 |
|---|---|
| 默认 | — |
键盘:聚焦标签列表后 ← / → / ↑ / ↓ 循环切换;关闭按钮聚焦后 Enter / Space 触发关闭。oas-tab-panel 声明 hidden 属性隐藏未激活面板(内容保留在 DOM)。