Skip to Content
搭建UI系统组件 - 标签栏

标签栏组件

标签栏常用于页面内容按类型拆分,可左右滑动或点击子标签切换内容。

应用场景

适用于多状态页面,如商城订单列表(待付款、待发货、待收货、已完成、售后)或发票报销(待完善、进行中、已驳回、已通过)等。

标签栏多状态页面示例

标签栏设计

标签栏有默认样式(蓝字白底有下划线为选中,黑字白底无下划线为未选中)。

标签栏默认样式示意

自定义样式

可自定义选中/未选中样式(如字体颜色、字号、下划线等)。

标签栏自定义样式示意

子标签栏设计

双击进入子标签栏,可为每个子标签单独配置样式或拖入其他组件展示内容。

子标签栏样式配置示意

标签栏内容

默认标签栏索引

进入页面后,开发者可设置默认展示的标签页(索引从 0 开始)。

标签栏索引设置示意

添加/修改标签页

点击“标签页”旁的“+”号添加新标签,鼠标悬停可修改/删除/跳转。

标签页添加与管理示意

常见问题

问:我的标签栏是纵向排列,无法满足需求怎么办?
答:可用选择视图+条件式容器实现,详见选择视图条件式容器

Last updated on