Tabbar 标签栏

使用场景如下:

1. 底部导航栏，用于在不同页面之间进行切换
2. 标签切换
3. 选项卡

演示

导航栏模式

将 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

变量名	说明	默认值
--l-tabbar-hover-color	选项卡的鼠标悬浮时的颜色	var(--l-primary-color-light1)
--l-tabbar-active-color	选项卡的选中时的颜色	var(--l-primary-color)
--l-tabbar-item-gap	选项卡之间的间距	0
--l-tabbar-height	选项卡的高度	38px[nav时默认为: 50px]
--l-tabbar-line-color	下划线的颜色	var(--l-primary-color)
--l-tabbar-card-border-color	卡片选项卡的边框颜色	#f5f7fa
--l-tabbar-card-border-radius	卡片选项卡的边框圆角	5px