@lateinos/thinking-ui

# TabBar 标签栏

# 使用指南

页面底部菜单栏：位于 App 底部，用于在展示多个并列的内容，用于快速在多个页面内容之间进行切换

# 规则

  • Tab标签的数量最少2个，最多支持5个。Tab标签的文字表达应简明清晰，长度应控制在 2-4 个字符。

# 代码演示

查看代码

# 与thinking-ui 2.0版组件的区别以及迁移

按照新的TabBar组件规范修改相关样式

  1. 弃用的props： border

# API - H3TabBar

# Props - H3TabBar

属性 说明 类型 默认值
index 要选中的H3TabBarItem的下标，若为字符串则为H3TabBarItem的name。v-model绑定值 string|number 0
activeColor 选中标签的颜色 string #315EFB
inactiveColor 未选中标签的颜色 string #BBBECA
fixed 是否固定在底部 boolean true

# Events - H3TabBar

事件名 说明 参数
input v-model绑定事件 value:number|string
change 标签选择变化事件 value:number|string

# API - H3TabBarItem

# Props - H3TabBarItem

属性 说明 类型 默认值
name 标签名称，作为匹配的标识符 string -
dot 是否显示图标右上角小红点 boolean false
text 图标右上角徽标的内容 number|string ''
limit 限制text展示，若超过则为显示 ${limit}+ number 99
icon 默认图标名称 string ''
activeIcon 选中标签图标名称 string ''

# Events - H3TabBarItem

事件名 说明 参数
click 点击触发事件

# Slots - H3TabBarItem

插槽名 说明 SlotProps
icon 自定义图标 {active: 是否为选中标签}

← Tab 标签页 →