mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-24 02:20:01 +08:00
bc17268ff9
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat(segmented): enhance name prop behavior and adjust focus style * test: update snapshot
3.0 KiB
3.0 KiB
| category | group | title | subtitle | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|---|
| Components | 数据展示 | Segmented | 分段控制器 | 用于展示多个选项并允许用户选择其中单个选项。 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original |
|
自 antd@4.20.0 版本开始提供该组件。
何时使用
- 用于展示多个选项并允许用户选择其中单个选项；
- 当切换选中选项时，关联区域的内容会发生变化。
代码演示
基本
垂直方向
Block 分段选择器
不可用
受控模式
自定义渲染
动态数据
三种大小
设置图标
只设置图标
配合 name 使用
受控同步模式
统一高度
自定义组件 Token
API
通用属性参考：通用属性
自
antd@4.20.0版本开始提供该组件。
Segmented
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| block | 将宽度调整为父元素宽度的选项 | boolean | false | |
| defaultValue | 默认选中的值 | string | number | ||
| disabled | 是否禁用 | boolean | false | |
| onChange | 选项变化时的回调函数 | function(value: string | number) | ||
| options | 数据化配置选项内容 | string[] | number[] | SegmentedItemType[] | [] | |
| size | 控件尺寸 | large | middle | small |
middle |
|
| vertical | 排列方向 | boolean | false |
5.21.0 |
| value | 当前选中的值 | string | number | ||
| name | Segmented 下所有 input[type="radio"] 的 name 属性。若未设置，则将回退到随机生成的名称 |
string | 5.23.0 |
SegmentedItemType
| 属性 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| label | 分段项的显示文本 | ReactNode | - | |
| value | 分段项的值 | string | number | - | |
| icon | 分段项的显示图标 | ReactNode | - | |
| disabled | 分段项的禁用状态 | boolean | false | |
| className | 自定义类名 | string | - |