mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-15 00:29:12 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity
f580ac85cf
ant-design/components/segmented/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.0 KiB
Raw Blame History

category group title cover coverDark demo
Components Data Display Segmented https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*papwTpNscPIAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tz7qSaWpi1kAAAAAAAAAAAAADrJ8AQ/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 Basic Controlled mode Custom Render Dynamic Three sizes of Segmented With Icon With Icon only Controlled Synced mode Consistent height

API

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