Tabs 标签页
用于承载同一层级下不同页面或类别的组件,方便用户在同一个页面框架下进行快速切换
构成
1
3
2
1: 文字
必有
2: 下划线
可选
3: dropdown
可选,默认关闭
Tab
变体/类型
基础选项卡:
Tab
下划线选项卡:
Tab
文字+dropdown
Tab
文字+下划线+dropdown:
Tab
类型说明:
basic tab 基础选项卡:
弱化分割感,保持界面视觉流连续性
underlined tab 下划线选项卡:
强内容分割,明确当前模块边界
使用场景
Tab
Tab
Tab
Tab
Tab
Tab
Tab
交互
Tab
Default
初始或未激活状态
Tab
Hover
鼠标悬停在可交互 Tab 上的临时状态,用户预示点击可能性
Tab
Selected
当前正在显示的 Tab 内容,已被用户选中
Tab
Disabled
表示当前不可交互或不可用的选项
标注
xl-56
lg-48
md-40
sm-32
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
56
40
48
32
40
24
32
16
14
12
10
8
多语言适配
TabTabTabTabTabTabTabTa
Tab
Tab
Tab
Tab
Tab
Tab
说明:
精简文案,使用核心单词,禁止换行,横向滑动
任何语言下,Tab 的选中态必须完整可见
RTL
TabTabTabTabTabTabTabTa
Tab
Tab
Tab
Tab
LTR
Taصحىb
Taصحىb
صحى
اللغةالعربيةالفصحى
RTL
用法
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
正确
Tab
Tab
Tab
Tab
Tab
Tab
USDT
Tab
Tab
Tab
Tab
Tab
Tab
错误
组合场景应主次分明,大小搭配使用,禁止使用同等大小同样式tabs运用在页面
TabTabTabTabTabTab
Tab
Tab
Tab
Tab
Tab
正确
TabTabTab
Tab
Tab
Tab
Tab
Tab
Tab
错误
在何语言下,Tab 的选中态必须完整可见,禁止截断省略