Tabbar 标签栏

使用场景如下:

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

引用

import { Tabbar, TabbarItem, regist } from "litos-ui";

regist([Tabbar, TabbarItem]);

演示

导航栏模式

将 type 设置为 nav[默认]; 通过 name 标记选项卡项，icon 标记渲染图标; 然后通过 slot="icon" 来渲染图标

选项卡模式

基础的、简洁的选项卡，设置 type 为 bar。

卡片式

具有卡片风格的标签。只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。 同时可以通过 gap 调整选项卡之间的间距。

排列方式

主轴的排列方式，只对 bar 类型生效。只需要将 justify-content 的属性设置为 justify-content 可用值即可。

API

Tabbar Attibutes

参数	说明	类型	默认值
name	选中的选项卡	string	-
type	风格	nav、bar、card	nav
gap	选项卡之间的间距	number、string	0
justify-content	主轴排列方式	string	flex-start

Tabbar Slots

名称	说明
default	只能为 l-tabbar-item 标签

Tabbar Events

事件名	说明	回调参数
change	选项卡切换时触发, e.detail.name 获取选中值	(e: Event)

TabbarItem

参数	说明	类型	默认值
name	选项卡项的名称， 必填	string	-
icon	是否渲染图标	off	-
only-icon	是否仅渲染图标	off	-

Tabbar CSS Variables

变量名	说明	默认值
--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