mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-01 06:49:32 +08:00
2f8fa45df3
* docs: update rootClassName description * docs: update rootClassName description * docs: update docs
2.1 KiB
2.1 KiB
| category | group | title | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|
| Components | Data Display | Segmented | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*papwTpNscPIAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tz7qSaWpi1kAAAAAAAAAAAAADrJ8AQ/original |
|
Segmented Controls. This component is available since antd@4.20.0.
When To Use
- When displaying multiple options and user can select a single option;
- When switching the selected option, the content of the associated area changes.
Examples
Basic
Block Segmented
Basic
Controlled mode
Custom Render
Dynamic
Three sizes of Segmented
With Icon
With Icon only
Controlled Synced mode
Consistent height
Custom component token
API
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 |