NG-ZORROSegmented分段控制器
何时使用#
- 用于展示多个选项并允许用户选择其中单个选项；
- 当切换选中选项时，关联区域的内容会发生变化。
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';代码演示
最简单的用法。
加载中动态加载数据。
加载中Selected index: 1
通过 ngModel 指定选中的 index
加载中我们为 Segmented 组件定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。
加载中在 Segmented Item 选项中只设置 Icon。
加载中Segmented 不可用。
加载中给 Segmented Item 设置 Icon。
加载中使用 nzLabelTemplate 自定义渲染每一个 Segmented Item。
加载中nzBlock 属性使其适合父元素宽度。
加载中API#
Segmented#
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
|---|---|---|---|---|
[nzBlock] | 将宽度调整为父元素宽度的选项 | boolean | false | |
[nzDisabled] | 是否禁用 | boolean | false | |
[nzOptions] | 数据化配置选项内容 | string[] | number[] | Array<{ label: string; value: string | number; icon: string; disabled?: boolean; useTemplate?: boolean }> | - | |
[nzSize] | 控件尺寸 | large | default | small | - | ✅ |
[ngModel] | 当前选中项目的 index | number | - | |
(nzValueChange) | 当前选中项目变化时触发回调 | EventEmitter<number> | - | |
(ngModelChange) | 当前选中项目变化时触发回调 | EventEmitter<number> | - |