mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 08:59:40 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity
e027cbec1c
ant-design/components/segmented/index.en-US.md
afc163 e027cbec1c
docs: format all markdown (#38629) 
* chore: add prettier-ignore in markdown demo

* docs: format markdown api table

* docs: format markdown api table
2022-11-17 17:31:26 +08:00

1.8 KiB
Raw Blame History

category group title cover demo
Components Data Display Segmented https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
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 -
value Currently selected value string | number