Tabs

Tabs make it easy to switch between different views.

When To Use#

Ant Design has 3 types of Tabs for different situations.

  • Card Tabs: for managing too many closeable views.
  • Normal Tabs: for functional aspects of a page.
  • RadioButton: for secondary tabs.

Import this Component Individually#

You can get more detail here.

import { NzTabsModule } from 'ng-zorro-antd/tabs';

Examples

Content of Tab Pane 1

Default activate first tab.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-basic',
  template: `
    <nz-tabset>
      <nz-tab nzTitle="Tab 1">
        Content of Tab Pane 1
      </nz-tab>
      <nz-tab nzTitle="Tab 2">
        Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="Tab 3">
        Content of Tab Pane 3
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsBasicComponent {}
Tab 1

Disabled a tab.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-disabled',
  template: `
    <nz-tabset>
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" [nzDisabled]="tab.disabled">
        {{ tab.name }}
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsDisabledComponent {
  tabs = [
    {
      name: 'Tab 1',
      disabled: false
    },
    {
      name: 'Tab 2',
      disabled: true
    },
    {
      name: 'Tab 3',
      disabled: false
    }
  ];
}
Tab 1

The Tab with Icon.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-icon',
  template: `
    <nz-tabset>
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
        <ng-template #titleTemplate> <i nz-icon [nzType]="tab.icon"></i>{{ tab.name }} </ng-template>
        {{ tab.name }}
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsIconComponent {
  tabs = [
    {
      active: true,
      name: 'Tab 1',
      icon: 'apple'
    },
    {
      active: false,
      name: 'Tab 2',
      icon: 'android'
    }
  ];
}
Content of tab 0

Tab can be slide to left or right(up or down), which is used for a lot of tabs.

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-slide',
  template: `
    <nz-radio-group [(ngModel)]="nzTabPosition">
      <label nz-radio-button [nzValue]="'top'">Horizontal</label>
      <label nz-radio-button [nzValue]="'left'">Vertical</label>
    </nz-radio-group>
    <nz-input-number style="float:right;" [nzMin]="0" [nzMax]="10" [(ngModel)]="selectedIndex"></nz-input-number>
    <nz-tabset
      style="height:220px;"
      [nzTabPosition]="nzTabPosition"
      [(nzSelectedIndex)]="selectedIndex"
      (nzSelectChange)="log([$event])"
    >
      <nz-tab
        *ngFor="let tab of tabs"
        [nzTitle]="tab.name"
        (nzSelect)="log(['select', tab])"
        (nzClick)="log(['click', tab])"
        (nzDeselect)="log(['deselect', tab])"
      >
        {{ tab.content }}
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsSlideComponent implements OnInit {
  tabs: any[] = [];
  nzTabPosition = 'top';
  selectedIndex = 0;

  /* tslint:disable-next-line:no-any */
  log(args: any[]): void {
    console.log(args);
  }

  ngOnInit(): void {
    for (let i = 0; i < 11; i++) {
      this.tabs.push({
        name: `Tab ${i}`,
        content: `Content of tab ${i}`
      });
    }
  }
}
Content of tab 1

You can add extra actions to the right of Tabs.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-extra',
  template: `
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
      <button nz-button>Extra Action</button>
    </ng-template>
  `
})
export class NzDemoTabsExtraComponent {
  tabs = [1, 2, 3];
}
Content of tab 1

Large size tabs are usally used in page header, and small size could be used in Modal.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <label nz-radio-button nzValue="small"><span>Small</span></label>
      <label nz-radio-button nzValue="default"><span>Default</span></label>
      <label nz-radio-button nzValue="large"><span>Large</span></label>
    </nz-radio-group>
    <nz-tabset [nzSize]="size">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsSizeComponent {
  size = 'small';
  tabs = [1, 2, 3];
}
Tab position:
top
Content of tab 1

Tab's position: left, right, top or bottom.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-position',
  template: `
    <div style="margin-bottom: 16px;">
      Tab position:
      <nz-select [(ngModel)]="position" style="width: 80px;">
        <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
      </nz-select>
    </div>
    <nz-tabset [nzTabPosition]="position" [nzType]="'line'">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsPositionComponent {
  position = 'top';
  tabs = [1, 2, 3];
  options = [
    { value: 'top', label: 'top' },
    { value: 'left', label: 'left' },
    { value: 'right', label: 'right' },
    { value: 'bottom', label: 'bottom' }
  ];
}
Content of Tab Pane 1

Another type Tabs, which doesn't support vertical mode.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-card',
  template: `
    <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab"> Content of Tab Pane {{ tab }} </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsCardComponent {
  tabs = [1, 2, 3];
}
Content of Tab 1

Only card type Tabs support adding & closable.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-editable-card',
  template: `
    <nz-tabset [nzType]="'card'" [nzTabBarExtraContent]="extraTemplate">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
        <ng-template #titleTemplate>
          <div>
            {{ tab }}
            <i nz-icon nzType="close" (click)="closeTab(tab)" class="ant-tabs-close-x"></i>
          </div>
        </ng-template>
        Content of {{ tab }}
      </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
      <i class="ant-tabs-new-tab" nz-icon nzType="plus" (click)="newTab()"></i>
    </ng-template>
  `
})
export class NzDemoTabsEditableCardComponent {
  tabs = ['Tab 1', 'Tab 2'];

  closeTab(tab: string): void {
    this.tabs.splice(this.tabs.indexOf(tab), 1);
  }

  newTab(): void {
    this.tabs.push('New Tab');
  }
}

Content of Tab Pane 1

Content of Tab Pane 1

Content of Tab Pane 1

Should be used at the top of container, needs to override styles.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-card-top',
  template: `
    <div class="card-container">
      <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
        <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab Title ' + tab">
          <p>Content of Tab Pane {{ tab }}</p>
          <p>Content of Tab Pane {{ tab }}</p>
          <p>Content of Tab Pane {{ tab }}</p>
        </nz-tab>
      </nz-tabset>
    </div>
  `,
  styles: [
    `
      :host {
        background: #f5f5f5;
        overflow: hidden;
        padding: 24px;
        display: block;
      }

      .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
        height: 120px;
        margin-top: -16px;
      }

      .card-container ::ng-deep .ant-tabs-card .ant-tabs-content .ant-tabs-tabpane {
        background: #fff;
        padding: 16px;
      }

      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar {
        border-color: #fff;
      }

      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
      }

      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab-active {
        border-color: #fff;
        background: #fff;
      }
    `
  ]
})
export class NzDemoTabsCardTopComponent {
  tabs = [1, 2, 3];
}
Content of Tab 1

Bind event for customized trigger.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-custom-add-trigger',
  template: `
    <div style="margin-bottom: 16px;">
      <button nz-button (click)="newTab()">ADD</button>
    </div>
    <nz-tabset [nzType]="'card'" [nzSelectedIndex]="index">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
        <ng-template #titleTemplate>
          <div>{{ tab }}<i nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i></div>
        </ng-template>
        Content of {{ tab }}
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsCustomAddTriggerComponent {
  index = 0;
  tabs = ['Tab 1', 'Tab 2'];

  closeTab(tab: string): void {
    this.tabs.splice(this.tabs.indexOf(tab), 1);
  }

  newTab(): void {
    this.tabs.push('New Tab');
    this.index = this.tabs.length - 1;
  }
}
eagerly

By default, the contents in nz-tab are eagerly loaded. Tab contents can be lazy loaded by declaring the body in a ng-template with the [nz-tab] attribute.

expand codeexpand code
/* entryComponents: NzDemoTabContentLazyComponent,NzDemoTabContentEagerlyComponent */
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tabs-lazy',
  template: `
    <nz-tabset>
      <nz-tab nzTitle="Tab Eagerly 1">
        <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
      </nz-tab>
      <nz-tab nzTitle="Tab Eagerly 2">
        <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
      </nz-tab>
      <nz-tab nzTitle="Tab Lazy 1">
        <ng-template nz-tab>
          <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
        </ng-template>
      </nz-tab>
      <nz-tab nzTitle="Tab Lazy 2">
        <ng-template nz-tab>
          <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
        </ng-template>
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsLazyComponent {}

@Component({
  selector: 'nz-demo-tab-content-lazy',
  template: `
    lazy
  `
})
export class NzDemoTabContentLazyComponent implements OnInit {
  ngOnInit(): void {
    console.log(`I will init when tab active`);
  }
}

@Component({
  selector: 'nz-demo-tab-content-eagerly',
  template: `
    eagerly
  `
})
export class NzDemoTabContentEagerlyComponent implements OnInit {
  ngOnInit(): void {
    console.log(`I will init eagerly`);
  }
}

API#

nz-tabset#

PropertyDescriptionTypeDefault
[nzSelectedIndex]Current tab's indexnumber-
[nzAnimated]Whether to change tabs with animation. Only works while nzTabPosition="top" | "bottom"boolean | {inkBar:boolean, tabPane:boolean}true, false when type="card"
[nzSize]preset tab bar size'large' | 'small' | 'default''default'
[nzTabBarExtraContent]Extra content in tab barTemplateRef<void>-
[nzTabBarStyle]Tab bar style objectobject-
[nzTabPosition]Position of tabs'top' | 'right' | 'bottom' | 'left''top'
[nzType]Basic style of tabs'line' | 'card''line'
[nzTabBarGutter]The gap between tabsnumber-
[nzHideAll]Whether hide all tabsbooleanfalse
[nzShowPagination]Whether show pre or next button when exceed display areabooleantrue
[nzLinkRouter]Link with Angular router. It supports child mode and query param modebooleanfalse
(nzSelectedIndexChange)Current tab's index change callbackEventEmitter<number>-
(nzSelectChange)Current tab's change callbackEventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>-
(nzOnNextClick)Callback executed when next button is clickedEventEmitter<void>-
(nzOnPrevClick)Callback executed when prev button is clickedEventEmitter<void>-

nz-tab#

PropertyDescriptionTypeDefault
[nzTitle]Show text in tab's headstring | TemplateRef<void>-
[nzForceRender]Forced render of content in tabs, not lazy render after clicking on tabsbooleanfalse
[nzDisabled]tab disableboolean-
(nzClick)title click callbackEventEmitter<void>-
(nzSelect)title select callbackEventEmitter<void>-
(nzDeselect)title deselect callbackEventEmitter<void>-

[nz-tab]#

Tab contents can be lazy loaded by declaring the body in a ng-template with the [nz-tab] attribute.

Show a link in tab's head. Used in router link mode.

This make the tabs component changes nzSelectedIndex with Angular route. You must use nz-tab-link instead of [nzTitle] in this situation.