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 value: Weekly
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 render each Segmented Item.

expand codeexpand code
      Loading...
Block Segmented

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

expand codeexpand code
      Loading...

API#

nz-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 }>-
[nzSize]The size of the Segmentedlarge | default | small-✅
[ngModel]Value of the currently selected optionstring | number-
(nzValueChange)Emits when value of the currently selected option changesEventEmitter<string | number>-
(ngModelChange)Emits when value of the currently selected option changesEventEmitter<string | number>-

label[nz-segmented-item]#

PropertyDescriptionTypeDefaultGlobal Config
[nzIcon]Icon in segmented itemstring-
[nzValue]Value of segmented itemstring | number-
[nzDisabled]Disable the segmented itembooleanfalse