mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
8fc4fa06c8
ant-design/components/segmented/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

2.2 KiB
Raw Blame History

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
cols
2

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

Design Token