mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-23 09:54:16 +08:00
bc17268ff9
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat(segmented): enhance name prop behavior and adjust focus style * test: update snapshot
3.1 KiB
3.1 KiB
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Data Display | Segmented | Display multiple options and allow users to select a single option. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original |
|
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
Vertical Direction
Block Segmented
Disabled
Controlled mode
Custom Render
Dynamic
Three sizes of Segmented
With Icon
With Icon only
With name
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[] | SegmentedItemType[] | [] | |
| size | The size of the Segmented. | large | middle | small |
middle |
|
| vertical | Orientation | boolean | false |
5.21.0 |
| value | Currently selected value | string | number | ||
| name | The name property of all input[type="radio"] children. if not set, it will fallback to a randomly generated name |
string | 5.23.0 |
SegmentedItemType
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| label | Display text for Segmented item | ReactNode | - | |
| value | Value for Segmented item | string | number | - | |
| icon | Display icon for Segmented item | ReactNode | - | |
| disabled | Disabled state of segmented item | boolean | false | |
| className | The additional css class | string | - |