Tabs
Used to hold components of different pages or categories at the same level, making it easy for users to quickly switch within the same page framework.
Anatomy
1
3
2
1: Text
There must be
2: Underline
Optional
3: 下拉菜单
Optional, default is off
Tab
Variant/Type
Basic tab:
Tab
Underline tabs:
Tab
Text + dropdown
Tab
Text + underline + dropdown:
Tab
Type description:
basic tab:
Weakens the sense of division and maintains the continuity of the interface's visual flow
underlined tab:
Strong content division, clearly defining current module boundaries
Usage scenario
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Interaction
Tab
Default
Initial or inactive state
Tab
Hover
The temporary state when the mouse hovers over an interactive tab, indicating the possibility of a click by the user.
Tab
Selected
The content of the currently displayed tab has been selected by the user.
Tab
Disabled
Indicates options that are currently non-interactive or unavailable.
Label
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
Multilingual adaptation
TabTabTabTabTabTabTabTa
Tab
Tab
Tab
Tab
Tab
Tab
Instructions:
Simplify copy, use core words, no line breaks, horizontal scroll
In any language, the selected state of the Tab must be fully visible
RTL
TabTabTabTabTabTabTabTa
Tab
Tab
Tab
Tab
LTR
Taصحىb
Taصحىb
Correct
Modern Standard Arabic
RTL
Usage
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Tab
Do
Tab
Tab
Tab
Tab
Tab
Tab
USDT
Tab
Tab
Tab
Tab
Tab
Tab
Don't
The combination of scenarios should have clear primary and secondary distinctions, with different sizes used together. It is prohibited to use tabs of the same size and style on the page.
TabTabTabTabTabTab
Tab
Tab
Tab
Tab
Tab
Do
TabTabTab
Tab
Tab
Tab
Tab
Tab
Tab
Don't
In what language must the selected state of the Tab be fully visible, preventing truncation?