Segmented
Segmented
Display multiple options and allow users to select a single option.
가져오기import{ Segmented }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Segmented }from"antd"; |
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[] | SegmentedItemType[] | [] | |
| size | The size of the Segmented. | large | middle | small | middle | |
| vertical | Orientation | boolean | false | 5.21.0 |
| value | Currently selected value | string | number |
| 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 | - |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| itemActiveBg | 选项激活态背景颜色 | string | rgba(0, 0, 0, 0.15) |
| itemColor | 选项文本颜色 | string | rgba(0, 0, 0, 0.65) |
| itemHoverBg | 选项悬浮态背景颜色 | string | rgba(0, 0, 0, 0.06) |
| itemHoverColor | 选项悬浮态文本颜色 | string | rgba(0, 0, 0, 0.88) |
| itemSelectedBg | 选项选中时背景颜色 | string | #ffffff |
| itemSelectedColor | 选项选中时文字颜色 | string | rgba(0, 0, 0, 0.88) |
| trackBg | Segmented 控件容器背景色 | string | #f5f5f5 |
| trackPadding | Segmented 控件容器的 padding | string | number | 2 |
