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

Set icon without label for Segmented Item.

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