Block 分段选择器

自定义渲染

只设置图标

配合 name 使用

Segmented 分段控制器

用于展示多个选项并允许用户选择其中单个选项。

使用

源码

components/segmented

文档

何时使用#

用于展示多个选项并允许用户选择其中单个选项；
当切换选中选项时，关联区域的内容会发生变化。

代码演示#

Daily

Weekly

Monthly

动态加载数据。

      加载中

List

Kanban

给 Segmented Item 设置 Icon。

      加载中

配合 name 使用

可以为配置 nzName 参数，为组合内的 input 元素赋予相同的 name 属性，使浏览器把分段控制器下的 input 真正看作是一组（例如可以通过方向键始终在同一组内更改选项）。

      加载中

垂直方向。

      加载中

20.2.0

我们为 Segmented 组件定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

      加载中

只设置图标

在 Segmented Item 选项中只设置 Icon。

      加载中

20.3.0

API#

nz-segmentedcomponent#

参数	说明	类型	默认值	全局配置	版本
`[nzBlock]`	将宽度调整为父元素宽度的选项	`boolean`	`false`
`[nzDisabled]`	是否禁用	`boolean`	`false`
`[nzOptions]`	数据化配置选项内容	`string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; }>`	-
`[nzSize]`	控件尺寸	`large \| default \| small`	-	✅
`[nzShape]`	形状	`default \| round`	`default`	-	20.3.0
`[nzVertical]`	排列方向	`boolean`	`false`	-	20.2.0
`[nzName]`	所有 `input[type="radio"]` 的 `name` 属性	`string`	-		20.3.0
`[ngModel]`	当前选中项目的 value	`string \| number`	-
`(nzValueChange)`	当前选中项目变化时触发回调	`EventEmitter<string \| number>`	-
`(ngModelChange)`	当前选中项目变化时触发回调	`EventEmitter<string \| number>`	-

label[nz-segmented-item]#

参数	说明	类型	默认值	全局配置
`[nzIcon]`	图标	`string`	-
`[nzValue]`	值	`string \| number`	-
`[nzDisabled]`	是否禁用	`boolean`	`false`