导航 · 16 / 21
Tabs st-tab-bar
标签栏只负责外观与指示条动画：active 由外部逻辑切换，切换后内容面板由你自己的 data 决定。st-tab-item 支持 icon 插槽与 disabled，宽度与字号直接用原生 CSS 调整。
基础切换：active 与内容面板
st-tab-bar 自身不保存选中状态。用 attr:active 把每个 item 的 active 绑定到同一个索引，on:click 改索引；指示条会自动滑到新的 active 项，面板再用同一份 data 控制显隐。
LIVE
st-tab-bar + st-tab-item邮件 · 3 封未读。指示条会跟随 active 项移动，面板内容完全由页面 data 决定。
通话 · 今天 2 次，共 12 分钟。st-tab-bar 不自动切换 active，点击只负责把索引交回给你。
收藏 · 8 条已保存。多组标签互不影响，每组维护自己的索引即可。
示例代码（active + 面板）
<st-tab-bar style="width: 100%;">
<st-tab-item attr:active="tab === 0" on:click="select(0)">邮件</st-tab-item>
<st-tab-item attr:active="tab === 1" on:click="select(1)">通话</st-tab-item>
</st-tab-bar>
<div attr:hidden="tab !== 0">邮件面板</div>
<div attr:hidden="tab !== 1">通话面板</div>图标插槽与纯文字
图标放 slot="icon"，标签文字走默认插槽。没有图标时就只显示文字，水平居中；图标尺寸随 font-size 缩放，24px 是默认值。两组标签各自维护 active，互不干扰。
LIVE
slot="icon"
带图标 · 4 项
👤我的
当前图标标签：{{iconName}}
纯文字 · font-size: 12px
概览
活动
设置
当前文字标签：{{textName}}
示例代码
<st-tab-item active><span slot="icon">📧</span>邮件</st-tab-item>
<st-tab-item>纯文字标签</st-tab-item>
<st-tab-bar style="font-size: 12px;">...</st-tab-bar>禁用项 disabled
disabled 项透明度降到 0.38，内部原生 button 被禁用：点击、键盘与事件冒泡全部被阻断，不会误切换。适合“尚未上线但需要被看到”的标签。
LIVE
disabled示例代码
<st-tab-item disabled>
<iconify-icon slot="icon" icon="mdi:message-text"></iconify-icon>聊天
</st-tab-item>等分、字号与宽度
st-tab-bar 是 flex 容器，item 默认按内容宽度排布，不会自动等分。需要等分就给 item 写 flex: 1；尺寸类默认值用 em，改 bar 的 font-size 就能整体缩放，也可以直接覆写高度或边框。
LIVE
flex / font-size
flex: 1 等分 · 3 项
日
周
月
当前周期：{{eqName}}
font-size: 12px · 4 项按内容宽
概览
成员
账单
设置
当前：{{smallName}}
示例代码（等分 / 缩放）
<st-tab-bar>
<st-tab-item style="flex: 1;" active>日</st-tab-item>
<st-tab-item style="flex: 1;">周</st-tab-item>
<st-tab-item style="flex: 1;">月</st-tab-item>
</st-tab-bar>
<st-tab-bar style="font-size: 12px;">...</st-tab-bar>程序化切换
组件没有 next / prev API，切换就是改数据。外部按钮与标签点击可以共用同一个 select 方法：上/下项按索引用余数循环，跳到某一项直接赋值，指示条与面板都会同步。
LIVE
外部按钮控制示例代码（外部按钮）
<st-button on:click="prevTab">上一项</st-button>
<st-button on:click="nextTab">下一项</st-button>
prevTab() {
this.tab = (this.tab + 2) % 3;
}
nextTab() {
this.tab = (this.tab + 1) % 3;
}同页多组标签
每组标签是一个独立的 st-tab-bar，各自维护索引即可并存。同一页面里不要把两组 item 混进同一个 bar——指示条只认第一个 active 项。
LIVE
多组独立状态
工作区
概览
成员
设置
当前：{{tabAName}}
报表周期
日
周
月
当前：{{tabBName}}
属性（st-tab-item）
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
active | boolean | 无 | 当前项：文字 primary 色，指示条跟随 |
disabled | boolean | 无 | 0.38 透明度，阻断点击 / 键盘 / 事件 |
style | 原生 CSS | 无 | 可写 flex 等分；st-tab-bar 上可写 font-size |
插槽 / 事件 / 注意
- st-tab-bar 无语义属性；item 插槽：
icon/ 默认文字。 - 事件：item 的 click 原生冒泡（composed）；disabled 项不派发。
- active 由外部逻辑切换，组件不自动管理；切换后指示条 0.3s 跟随。
- 键盘：Tab 聚焦、Enter / Space 激活，focus-visible 有焦点环。
- 默认高度 48px、文字 13px；改 font-size 等比缩放。
- bar 是 flex 容器，不会自动等分或滚动；等分写
flex: 1，项多时自行控制宽度。