Segmented

Display multiple options and allow users to select a single option.
Import

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.

Examples

Basic Usage.

      Loading...
    

Load options dynamically.

      Loading...
    


Custom render each Segmented Item.

      Loading...
    

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

      Loading...
    

Set icon without label for Segmented Item.

      Loading...
    

Disabled Segmented.

      Loading...
    

Selected value: Weekly

Set selected option via ngModel.

      Loading...
    


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

      Loading...
    

Set icon for Segmented Item.

      Loading...
    

Make it vertical.

      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-
[nzVertical]Orientationbooleanfalse-
[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