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 的选中态必须完整可见,禁止截断省略

DESIGN

中文