Tabbar 标签栏
使用场景如下:
- 底部导航栏，用于在不同页面之间进行切换
- 标签切换
- 选项卡
演示
导航栏模式
将 type 设置为 nav[默认]
选项卡
基础的、简洁的选项卡，初始选中第2项
排列方式
主轴的排列方式，只对 bar 类型生效。只需要将 justify-content 的属性设置为 justify-content可用值 即可。
卡片式
具有卡片风格的标签。只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。 同时可以通过 gap 调整选项卡之间的间距。
API
Tabbar Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
v-model | 选中的选项卡 | string | - |
type | 风格 | nav、bar、card | nav |
justify-content | 主轴的排列方式 | string | flex-start |
gap | 选项卡之间的间距 | number | 0 |
Tabbar Events
| 事件名 | 说明 | 参数 | | change | 选项卡切换时触发 | (active: string) => void |
TabbarItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
name | 选项卡的唯一标识 | string | name | - |
TabbarItem Slots
| 插槽名 | 说明 |
|---|---|
icon | 选项卡的图标 |
default | 选项卡的内容 |
Tabbar Css Vars
| 变量名 | 说明 | 默认值 |
|---|---|---|
--nt-tabbar-hover-color | 选项卡的鼠标悬浮时的颜色 | var(--nt-primary-color-light1) |
--nt-tabbar-active-color | 选项卡的选中时的颜色 | var(--nt-primary-color) |
--nt-tabbar-item-gap | 选项卡之间的间距 | 0 |
--nt-tabbar-height | 选项卡的高度 | 38px[nav时默认为: 50px] |
--nt-tabbar-line-color | 下划线的颜色 | var(--nt-primary-color) |
--nt-tabbar-card-border-color | 卡片选项卡的边框颜色 | #f5f7fa |
--nt-tabbar-card-border-radius | 卡片选项卡的边框圆角 | 5px |