Tabs级别分为三个等级:Primary(一级)、Secondary(二级)、Tertiary(三级),用于在页面中切换不同的内容视图。
用于主要的分类场景,具有强调当前选中状态的下划线指示器。
用于次要的分类场景,具有带边框的标签样式。
需要包含在一个容器内使用,用于更细分的场景。
Tabs 可以嵌入图标使用,通过 iconLeft 和 iconRight 参数控制图标位置。
二级 Tabs 也可以嵌入图标。
三级 Tabs 可以嵌入图标,左侧和右侧都可以添加。
一级 Tabs 支持配置数字徽标和红点徽标,用于展示未读数量或状态提醒。
二级 Tabs 支持配置数字徽标和红点徽标,徽标浮在标签右上角,不占用布局宽度。
常规情况下,设计中只涉及【一级】和【二级】同时存在 或【二级】【三级】同时存在的情况,极少数情况下在多层级分类会同时出现【一】【二】【三】级。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 |