Segmented
Click to toggle the filter options to switch the content and features on the page.
Anatomy
Label
Label
Label
1
2
3
1: Tab
Supports plain text, pure icons, and combinations of icons and text. Tabs slide to switch upon clicking, and business-customized styles are supported.
2: Container
Default fixed width, can also adapt to the width of the parent container; height defaults to two preset heights, and supports custom business styles.
3: Ups and Downs Color
Default price movement color type provided
Variant/Type
Default:
40HQ
Label
Label
Label
Label
Size 32
Label
Label
Label
Label
24 High
Label
Label
Label
Label
Change:
40HQ
Label
Label
Size 32
Label
Label
24 High
Label
Label
Usage scenario
Modal Title
Label
Label
❖
Replace me
Secondary
Primary
Used to display multiple options and allow the user to select a single option among them;
When the selected option is toggled, the content of the associated area changes;
Segmented is different from tabs; it usually supports filtering across fewer dimensions of the same type, generally fewer than 5, whereas tabs can provide more options and are better suited for filtering across different types of dimensions.
Label
Default fixed width:
Tabs support three combinations: text-only, icon-only, and icon + text, as well as business-customized content:
Tab disabled:
Adaptive width:
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
❖
❖
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Change:
24
32
12
12
2
2
2
2
4
40
Annotation instructions:
Copywriting 14 Medium
icon 16*16px
Multilingual adaptation
Prioritize concise copy. A maximum of 16 characters is recommended. If the width is fixed and exceeds this limit, truncate with ellipsis.
CrossCrossCrossC
Isolated
CrossCrossCrossC
Isolated
CrossCrossCrossCCr…
Isolated
RTL
Cross
Isolated
LTR
Insulated
Alternate
RTL
Usage
Cross
Isolated
Label
Label
Do
Isolated
Label
Don't
Do not mix text and icons within components
Segment Controller
Segment Selection
Toggle Switch
Option Toggle
Selection Control