Segmented分段控制器

何时使用#

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

代码演示

最简单的用法。

expand codeexpand code
      加载中
    

动态加载数据。

expand codeexpand code
      加载中
    


Selected index: 1

通过 ngModel 指定选中的 index

expand codeexpand code
      加载中
    


我们为 Segmented 组件定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

expand codeexpand code
      加载中
    

在 Segmented Item 选项中只设置 Icon。

expand codeexpand code
      加载中
    

Segmented 不可用。

expand codeexpand code
      加载中
    

给 Segmented Item 设置 Icon。

expand codeexpand code
      加载中
    

使用 nzLabelTemplate 自定义渲染每一个 Segmented Item。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

API#

Segmented#

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