Segmented
Segmented
Importimport { Segmented } from 'antd'; |
 |
VOOZH | about |
|
VOOZH | about |
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 | Global Config |
|---|---|---|---|---|---|
| block | Option to fit width to its parent's width | boolean | false | × | |
| classNames | Customize class for each semantic structure inside the Segmented component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| defaultValue | Default selected value | string | number | Value of first item in options | × | |
| 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[] | [] | × | |
| orientation | Orientation | horizontal | vertical | horizontal | × | |
| size | The size of the Segmented. | large | medium | small | medium | × | |
| styles | Customize inline style for each semantic structure inside the Segmented component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| vertical | Orientation. Simultaneously existing with orientation, orientation takes priority | boolean | false | 5.21.0 | × |
| value | Currently selected value | string | number | × | ||
| shape | shape of Segmented | default | round | default | 5.24.0 | × |
| 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 | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| disabled | Disabled state of segmented item | boolean | false | |
| className | The additional css class | string | - | |
| icon | Display icon for Segmented item | ReactNode | - | |
| label | Display text for Segmented item | ReactNode | - | |
| tooltip | tooltip for Segmented item | string | TooltipProps | - | |
| value | Value for Segmented item | 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) |
| trackBg | Background of Segmented container | string | #f5f5f5 |
| trackPadding | Padding of Segmented container | string | number | 2 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| boxShadowTertiary | Control the tertiary box shadow style of an element. | string | 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 6px -1px rgba(0,0,0,0.03), 0 2px 4px 0 rgba(0,0,0,0.03) |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| controlHeightSM | SM component height | number | 24 |
| controlPaddingHorizontal | Control the horizontal padding of an element. | number | 12 |
| controlPaddingHorizontalSM | Control the horizontal padding of an element with a small-medium size. | number | 8 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | cubic-bezier(0.645, 0.045, 0.355, 1) |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
The most basic usage.
block property will make the Segmented fit to its parent width.
Disabled Segmented.
Custom each Segmented Item.
There are three sizes of a Segmented component: large (40px), medium (32px), and small (24px).
Set icon without label for Segmented Item.
You can customize the semantic dom style of the Segmented by passing objects/functions through classNames and styles.
Make it vertical.
Round shape of Segmented.
Controlled Segmented.
Load options dynamically.
Set icon for Segmented Item.
Passing the name property to all input[type="radio"] that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented.
