NG-ZORROSegmented
When To Use#
- When displaying multiple options and user can select a single option;
- When switching the selected option, the content of the associated area changes.
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';Examples
Basic Usage.
Loading...Load options dynamically.
Loading...Selected index: 1
Set selected option via ngModel.
Loading...There are three sizes of an Segmented: large (40px), default (32px) and small (24px).
Loading...Set icon without label for Segmented Item.
Loading...Disabled Segmented.
Loading...Set icon for Segmented Item.
Loading...Custom each Segmented Item by nzLabelTemplate.
Loading...nzBlock property will make the Segmented fit to its parent width.
Loading...API#
Segmented#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzBlock] | Option to fit width to its parent's width | boolean | false | |
[nzDisabled] | Disable all segments | boolean | false | |
[nzOptions] | Set children optional | string[] | number[] | Array<{ label: string; value: string | number; icon: string; disabled?: boolean; useTemplate?: boolean }> | - | |
[nzSize] | The size of the Segmented | large | default | small | - | ✅ |
[ngModel] | Index of the currently selected option | number | - | |
(nzValueChange) | Emits when index of the currently selected option changes | EventEmitter<number> | - | |
(ngModelChange) | Emits when index of the currently selected option changes | EventEmitter<number> | - |