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

Basic Usage.

expand codeexpand code
      Loading...

Dynamic

Load options dynamically.

expand codeexpand code
      Loading...




Selected index: 1
ngModel

Set selected option via ngModel.

expand codeexpand code
      Loading...




Three sizes of Segmented

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

expand codeexpand code
      Loading...
With Icon only

Set icon without label for Segmented Item.

expand codeexpand code
      Loading...

Disabled

Disabled Segmented.

expand codeexpand code
      Loading...
With Icon

Set icon for Segmented Item.

expand codeexpand code
      Loading...
Custom Render

Custom each Segmented Item by nzLabelTemplate.

expand codeexpand code
      Loading...
Block Segmented

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>-