mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-01 06:49:32 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity
2ece2c6b63
ant-design/components/segmented/index.en-US.md
MadCcc 40e77c40d3
docs: overview dark cover (#40666) 
* docs: add dark overview

* docs: show dark cover in dark theme

* docs: update cover
2023-02-09 22:17:31 +08:00

1.9 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