ant-design/components/segmented/index.en-US.md
MadCcc 4ecc0d7f95
docs: optimize overview svg (#47203)
* docs: optimize overview svg

* docs: update

* docs: dark
2024-01-29 14:50:36 +08:00

2.1 KiB
Raw Blame History

category group title cover coverDark demo
Components Data Display Segmented https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original
cols
2

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 Disabled 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 refCommon 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

Design Token