Segmented

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.

expand codeexpand code
Loading...

Load options dynamically.

expand codeexpand code
Loading...


Selected index: 1

Set selected option via ngModel.

expand codeexpand code
Loading...


There are three sizes of an Segmented: large (40px), default (32px) and small (24px).

expand codeexpand code
Loading...

Disabled Segmented.

expand codeexpand code
Loading...

Set icon for Segmented Item.

expand codeexpand code
Loading...

Custom each Segmented Item by nzLabelTemplate.

expand codeexpand code
Loading...

nzBlock property will make the Segmented fit to its parent width.

expand codeexpand code
Loading...

API#

Segmented#

PropertyDescriptionTypeDefaultGlobal Config
[nzBlock]Option to fit width to its parent's widthbooleanfalse
[nzDisabled]Disable all segmentsbooleanfalse
[nzOptions]Set children optionalstring[] | number[] | Array<{ label: string; value: string | number; icon: string; disabled?: boolean; useTemplate?: boolean }>-
[nzSize]The size of the Segmentedlarge | default | small-
[ngModel]Index of the currently selected optionnumber-
(nzValueChange)Emits when index of the currently selected option changesEventEmitter<number>-
(ngModelChange)Emits when index of the currently selected option changesEventEmitter<number>-