Segmented分段控制器

何时使用#

  • 用于展示多个选项并允许用户选择其中单个选项；
  • 当切换选中选项时，关联区域的内容会发生变化。
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';

代码演示

基本

最简单的用法。

expand codeexpand code
      加载中

动态数据

动态加载数据。

expand codeexpand code
      加载中

Selected value: Weekly
ngModel

通过 ngModel 指定选中的 value

expand codeexpand code
      加载中


三种大小

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

expand codeexpand code
      加载中
只设置图标

在 Segmented Item 选项中只设置 Icon。

expand codeexpand code
      加载中

不可用

Segmented 不可用。

expand codeexpand code
      加载中
设置图标

给 Segmented Item 设置 Icon。

expand codeexpand code
      加载中


自定义渲染

自定义渲染每一个 Segmented Item。

expand codeexpand code
      加载中
Block 分段选择器

nzBlock 属性使其适合父元素宽度。

expand codeexpand code
      加载中

API#

nz-segmented#

参数说明类型默认值全局配置
[nzBlock]将宽度调整为父元素宽度的选项booleanfalse
[nzDisabled]是否禁用booleanfalse
[nzOptions]数据化配置选项内容string[] | number[] | Array<{ label: string; value: string | number; icon: string; disabled?: boolean; }>-
[nzSize]控件尺寸large | default | small-✅
[ngModel]当前选中项目的 valuestring | number-
(nzValueChange)当前选中项目变化时触发回调EventEmitter<string | number>-
(ngModelChange)当前选中项目变化时触发回调EventEmitter<string | number>-

label[nz-segmented-item]#

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