通用/标签页

Tabs 标签页

Tabs级别分为三个等级:Primary(一级)、Secondary(二级)、Tertiary(三级),用于在页面中切换不同的内容视图。

Primary Tabs

用于主要的分类场景,具有强调当前选中状态的下划线指示器。

Secondary Tabs

用于次要的分类场景,具有带边框的标签样式。

Tertiary Tabs

需要包含在一个容器内使用,用于更细分的场景。

带图标的 Primary Tabs

Tabs 可以嵌入图标使用,通过 iconLeft 和 iconRight 参数控制图标位置。

带图标的 Secondary Tabs

二级 Tabs 也可以嵌入图标。

带图标的 Tertiary Tabs

三级 Tabs 可以嵌入图标,左侧和右侧都可以添加。

带徽标的 Primary Tabs

一级 Tabs 支持配置数字徽标和红点徽标,用于展示未读数量或状态提醒。

带徽标的 Secondary Tabs

二级 Tabs 支持配置数字徽标和红点徽标,徽标浮在标签右上角,不占用布局宽度。

页面组合示例

常规情况下,设计中只涉及【一级】和【二级】同时存在 或【二级】【三级】同时存在的情况,极少数情况下在多层级分类会同时出现【一】【二】【三】级。

API 参考

参数 说明 类型 可选值 默认值
type Tabs 类型 string 'primary' | 'secondary' | 'tertiary' | 'tertiary-box' 'primary'
tabs 标签配置数组 array - []
tabs[].name 标签名称 string - -
tabs[].iconLeft 左侧图标类名 string - -
tabs[].iconRight 右侧图标类名 string - -
tabs[].badge 徽标配置,一级和二级支持数字徽标和红点徽标 string | number | object { text: '12' } | { dot: true } -
tabs[].disabled 是否禁用 boolean true | false false
defaultActive 默认选中的标签索引 number - 0
onChange 切换标签时的回调函数 function - null