- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Segmented Controls. This component is available since antd@4.20.0
.
Common props ref:Common props
This component is available since
antd@4.20.0
Property | Description | Type | Default | Version |
---|---|---|---|---|
block | Option to fit width to its parent's width | boolean | false | |
defaultValue | Default selected value | string | number | ||
disabled | Disable all segments | boolean | false | |
onChange | The callback function that is triggered when the state changes | function(value: string | number) | ||
options | Set children optional | string[] | number[] | Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
size | The size of the Segmented. | large | middle | small | middle | |
value | Currently selected value | string | number |
Token Name | Description | Type | Default Value |
---|---|---|---|
itemActiveBg | Background color of item when active | string | rgba(0, 0, 0, 0.15) |
itemColor | Text color of item | string | rgba(0, 0, 0, 0.65) |
itemHoverBg | Background color of item when hover | string | rgba(0, 0, 0, 0.06) |
itemHoverColor | Text color of item when hover | string | rgba(0, 0, 0, 0.88) |
itemSelectedBg | Background color of item when selected | string | #ffffff |
itemSelectedColor | Text color of item when selected | string | rgba(0, 0, 0, 0.88) |