Tabs标签页

选项卡切换组件。

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
  • RadioButton 可作为更次级的页签来使用。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

代码演示

Tabs标签页 - 图1

基本

默认选中第一项。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-basic',
  5.   template: `
  6.     <nz-tabset>
  7.       <nz-tab nzTitle="Tab 1">
  8.         Content of Tab Pane 1
  9.       </nz-tab>
  10.       <nz-tab nzTitle="Tab 2">
  11.         Content of Tab Pane 2
  12.       </nz-tab>
  13.       <nz-tab nzTitle="Tab 3">
  14.         Content of Tab Pane 3
  15.       </nz-tab>
  16.     </nz-tabset>
  17.   `
  18. })
  19. export class NzDemoTabsBasicComponent {}

Tabs标签页 - 图2

禁用

禁用某一项。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-disabled',
  5.   template: `
  6.     <nz-tabset>
  7.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" [nzDisabled]="tab.disabled">
  8.         {{ tab.name }}
  9.       </nz-tab>
  10.     </nz-tabset>
  11.   `
  12. })
  13. export class NzDemoTabsDisabledComponent {
  14.   tabs = [
  15.     {
  16.       name: 'Tab 1',
  17.       disabled: false
  18.     },
  19.     {
  20.       name: 'Tab 2',
  21.       disabled: true
  22.     },
  23.     {
  24.       name: 'Tab 3',
  25.       disabled: false
  26.     }
  27.   ];
  28. }

Tabs标签页 - 图3

图标

有图标的标签。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-icon',
  5.   template: `
  6.     <nz-tabset>
  7.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
  8.         <ng-template #titleTemplate> <i nz-icon [nzType]="tab.icon"></i>{{ tab.name }} </ng-template>
  9.         {{ tab.name }}
  10.       </nz-tab>
  11.     </nz-tabset>
  12.   `
  13. })
  14. export class NzDemoTabsIconComponent {
  15.   tabs = [
  16.     {
  17.       active: true,
  18.       name: 'Tab 1',
  19.       icon: 'apple'
  20.     },
  21.     {
  22.       active: false,
  23.       name: 'Tab 2',
  24.       icon: 'android'
  25.     }
  26.   ];
  27. }

Tabs标签页 - 图4

滑动

可以左右、上下滑动，容纳更多标签。

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-slide',
  5.   template: `
  6.     <nz-radio-group [(ngModel)]="nzTabPosition">
  7.       <label nz-radio-button [nzValue]="'top'">Horizontal</label>
  8.       <label nz-radio-button [nzValue]="'left'">Vertical</label>
  9.     </nz-radio-group>
  10.     <nz-input-number style="float:right;" [nzMin]="0" [nzMax]="10" [(ngModel)]="selectedIndex"></nz-input-number>
  11.     <nz-tabset
  12.       style="height:220px;"
  13.       [nzTabPosition]="nzTabPosition"
  14.       [(nzSelectedIndex)]="selectedIndex"
  15.       (nzSelectChange)="log([$event])"
  16.     >
  17.       <nz-tab
  18.         *ngFor="let tab of tabs"
  19.         [nzTitle]="tab.name"
  20.         (nzSelect)="log(['select', tab])"
  21.         (nzClick)="log(['click', tab])"
  22.         (nzDeselect)="log(['deselect', tab])"
  23.       >
  24.         {{ tab.content }}
  25.       </nz-tab>
  26.     </nz-tabset>
  27.   `
  28. })
  29. export class NzDemoTabsSlideComponent implements OnInit {
  30.   tabs: any[] = [];
  31.   nzTabPosition = 'top';
  32.   selectedIndex = 0;
  34.   /* tslint:disable-next-line:no-any */
  35.   log(args: any[]): void {
  36.     console.log(args);
  37.   }
  39.   ngOnInit(): void {
  40.     for (let i = 0; i < 11; i++) {
  41.       this.tabs.push({
  42.         name: `Tab ${i}`,
  43.         content: `Content of tab ${i}`
  44.       });
  45.     }
  46.   }
  47. }

Tabs标签页 - 图5

附加内容

可以在页签右边添加附加操作。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-extra',
  5.   template: `
  6.     <nz-tabset [nzTabBarExtraContent]="extraTemplate">
  7.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
  8.     </nz-tabset>
  9.     <ng-template #extraTemplate>
  10.       <button nz-button>Extra Action</button>
  11.     </ng-template>
  12.   `
  13. })
  14. export class NzDemoTabsExtraComponent {
  15.   tabs = [1, 2, 3];
  16. }

Tabs标签页 - 图6

大小

大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-size',
  5.   template: `
  6.     <nz-radio-group [(ngModel)]="size">
  7.       <label nz-radio-button nzValue="small"><span>Small</span></label>
  8.       <label nz-radio-button nzValue="default"><span>Default</span></label>
  9.       <label nz-radio-button nzValue="large"><span>Large</span></label>
  10.     </nz-radio-group>
  11.     <nz-tabset [nzSize]="size">
  12.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
  13.     </nz-tabset>
  14.   `
  15. })
  16. export class NzDemoTabsSizeComponent {
  17.   size = 'small';
  18.   tabs = [1, 2, 3];
  19. }

Tabs标签页 - 图7

位置

有四个位置，nzTabPosition="left|right|top|bottom"。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-position',
  5.   template: `
  6.     <div style="margin-bottom: 16px;">
  7.       Tab position：
  8.       <nz-select [(ngModel)]="position" style="width: 80px;">
  9.         <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
  10.       </nz-select>
  11.     </div>
  12.     <nz-tabset [nzTabPosition]="position" [nzType]="'line'">
  13.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
  14.     </nz-tabset>
  15.   `
  16. })
  17. export class NzDemoTabsPositionComponent {
  18.   position = 'top';
  19.   tabs = [1, 2, 3];
  20.   options = [
  21.     { value: 'top', label: 'top' },
  22.     { value: 'left', label: 'left' },
  23.     { value: 'right', label: 'right' },
  24.     { value: 'bottom', label: 'bottom' }
  25.   ];
  26. }

Tabs标签页 - 图8

卡片式页签

另一种样式的页签，不提供对应的垂直样式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-card',
  5.   template: `
  6.     <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
  7.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab"> Content of Tab Pane {{ tab }} </nz-tab>
  8.     </nz-tabset>
  9.   `
  10. })
  11. export class NzDemoTabsCardComponent {
  12.   tabs = [1, 2, 3];
  13. }

Tabs标签页 - 图9

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-editable-card',
  5.   template: `
  6.     <nz-tabset [nzType]="'card'" [nzTabBarExtraContent]="extraTemplate">
  7.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
  8.         <ng-template #titleTemplate>
  9.           <div>
  10.             {{ tab }}
  11.             <i nz-icon nzType="close" (click)="closeTab(tab)" class="ant-tabs-close-x"></i>
  12.           </div>
  13.         </ng-template>
  14.         Content of {{ tab }}
  15.       </nz-tab>
  16.     </nz-tabset>
  17.     <ng-template #extraTemplate>
  18.       <i class="ant-tabs-new-tab" nz-icon nzType="plus" (click)="newTab()"></i>
  19.     </ng-template>
  20.   `
  21. })
  22. export class NzDemoTabsEditableCardComponent {
  23.   tabs = ['Tab 1', 'Tab 2'];
  25.   closeTab(tab: string): void {
  26.     this.tabs.splice(this.tabs.indexOf(tab), 1);
  27.   }
  29.   newTab(): void {
  30.     this.tabs.push('New Tab');
  31.   }
  32. }

Tabs标签页 - 图10

卡片式页签容器

用于容器顶部，需要一点额外的样式覆盖。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-card-top',
  5.   template: `
  6.     <div class="card-container">
  7.       <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
  8.         <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab Title ' + tab">
  9.           <p>Content of Tab Pane {{ tab }}</p>
  10.           <p>Content of Tab Pane {{ tab }}</p>
  11.           <p>Content of Tab Pane {{ tab }}</p>
  12.         </nz-tab>
  13.       </nz-tabset>
  14.     </div>
  15.   `,
  16.   styles: [
  17.     `
  18.       :host {
  19.         background: #f5f5f5;
  20.         overflow: hidden;
  21.         padding: 24px;
  22.         display: block;
  23.       }
  25.       .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
  26.         height: 120px;
  27.         margin-top: -16px;
  28.       }
  30.       .card-container ::ng-deep .ant-tabs-card .ant-tabs-content .ant-tabs-tabpane {
  31.         background: #fff;
  32.         padding: 16px;
  33.       }
  35.       .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar {
  36.         border-color: #fff;
  37.       }
  39.       .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab {
  40.         border-color: transparent;
  41.         background: transparent;
  42.       }
  44.       .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab-active {
  45.         border-color: #fff;
  46.         background: #fff;
  47.       }
  48.     `
  49.   ]
  50. })
  51. export class NzDemoTabsCardTopComponent {
  52.   tabs = [1, 2, 3];
  53. }

Tabs标签页 - 图11

自定义新增页签触发器

给自定义触发器绑定事件。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-custom-add-trigger',
  5.   template: `
  6.     <div style="margin-bottom: 16px;">
  7.       <button nz-button (click)="newTab()">ADD</button>
  8.     </div>
  9.     <nz-tabset [nzType]="'card'" [nzSelectedIndex]="index">
  10.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
  11.         <ng-template #titleTemplate>
  12.           <div>{{ tab }}<i nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i></div>
  13.         </ng-template>
  14.         Content of {{ tab }}
  15.       </nz-tab>
  16.     </nz-tabset>
  17.   `
  18. })
  19. export class NzDemoTabsCustomAddTriggerComponent {
  20.   index = 0;
  21.   tabs = ['Tab 1', 'Tab 2'];
  23.   closeTab(tab: string): void {
  24.     this.tabs.splice(this.tabs.indexOf(tab), 1);
  25.   }
  27.   newTab(): void {
  28.     this.tabs.push('New Tab');
  29.     this.index = this.tabs.length - 1;
  30.   }
  31. }

Tabs标签页 - 图12

懒加载

默认情况下，nz-tab 中的组件会进行预加载，如果希望当 Tab 被激活时再加载组件，可以使用该示例中的懒加载方式。

  1. /* entryComponents: NzDemoTabContentLazyComponent,NzDemoTabContentEagerlyComponent */
  2. import { Component, OnInit } from '@angular/core';
  4. @Component({
  5.   selector: 'nz-demo-tabs-lazy',
  6.   template: `
  7.     <nz-tabset>
  8.       <nz-tab nzTitle="Tab Eagerly 1">
  9.         <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
  10.       </nz-tab>
  11.       <nz-tab nzTitle="Tab Eagerly 2">
  12.         <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
  13.       </nz-tab>
  14.       <nz-tab nzTitle="Tab Lazy 1">
  15.         <ng-template nz-tab>
  16.           <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
  17.         </ng-template>
  18.       </nz-tab>
  19.       <nz-tab nzTitle="Tab Lazy 2">
  20.         <ng-template nz-tab>
  21.           <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
  22.         </ng-template>
  23.       </nz-tab>
  24.     </nz-tabset>
  25.   `
  26. })
  27. export class NzDemoTabsLazyComponent {}
  29. @Component({
  30.   selector: 'nz-demo-tab-content-lazy',
  31.   template: `
  32.     lazy
  33.   `
  34. })
  35. export class NzDemoTabContentLazyComponent implements OnInit {
  36.   ngOnInit(): void {
  37.     console.log(`I will init when tab active`);
  38.   }
  39. }
  41. @Component({
  42.   selector: 'nz-demo-tab-content-eagerly',
  43.   template: `
  44.     eagerly
  45.   `
  46. })
  47. export class NzDemoTabContentEagerlyComponent implements OnInit {
  48.   ngOnInit(): void {
  49.     console.log(`I will init eagerly`);
  50.   }
  51. }

Tabs标签页 - 图13

路由联动

与路由联动，点击 tab 更改路由，并且在路由改变时自动切换 tab。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-link-router',
  5.   template: `
  6.     <nz-tabset nzLinkRouter>
  7.       <nz-tab>
  8.         <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">Default</a>
  9.         Default.
  10.       </nz-tab>
  11.       <nz-tab>
  12.         <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'two' }" queryParamsHandling="merge">Two</a>
  13.         Two.
  14.       </nz-tab>
  15.       <nz-tab>
  16.         <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'three' }" queryParamsHandling="merge">Three</a>
  17.         Three.
  18.       </nz-tab>
  19.       <nz-tab>
  20.         <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'four' }" queryParamsHandling="merge">Four</a>
  21.         Four.
  22.       </nz-tab>
  23.     </nz-tabset>
  24.   `
  25. })
  26. export class NzDemoTabsLinkRouterComponent {}

API

nz-tabsetcomponent

参数说明类型默认值
[nzSelectedIndex]当前激活 tab 面板的 序列号，可双向绑定number-
[nzAnimated]是否使用动画切换 Tabs，在 nzTabPosition=top | bottom 时有效boolean | {inkBar:boolean, tabPane:boolean}true, 当 type="card" 时为 false
[nzSize]大小，提供 largedefault 和 small 三种大小'large' | 'small' | 'default''default'
[nzTabBarExtraContent]tab bar 上额外的元素TemplateRef<void>-
[nzTabBarStyle]tab bar 的样式对象object-
[nzTabPosition]页签位置，可选值有 toprightbottomleft'top' | 'right' | 'bottom' | 'left''top'
[nzType]页签的基本样式，可选 line、card 类型'line' | 'card''line'
[nzTabBarGutter]tabs 之间的间隙number-
[nzHideAll]是否隐藏所有tab内容booleanfalse
[nzShowPagination]是否超出范围时显示pre和next按钮booleantrue
[nzLinkRouter]与 Angular 路由联动booleanfalse
[nzLinkExact]以严格匹配模式确定联动的路由booleantrue
(nzSelectedIndexChange)当前激活 tab 面板的 序列号变更回调函数EventEmitter<number>-
(nzSelectChange)当前激活 tab 面板变更回调函数EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>-
(nzOnNextClick)next 按钮被点击的回调EventEmitter<void>-
(nzOnPrevClick)prev 按钮被点击的回调EventEmitter<void>-

nz-tabcomponent

参数说明类型默认值
[nzTitle]选项卡头显示文字string | TemplateRef<void>-
[nzForceRender]被隐藏时是否渲染 DOM 结构booleanfalse
[nzDisabled]是否禁用boolean-
(nzClick)title被点击的回调函数EventEmitter<void>-
(nzSelect)tab被选中的回调函数EventEmitter<void>-
(nzDeselect)tab被取消选中的回调函数EventEmitter<void>-

[nz-tab]directive

与 ng-template 一同使用，用于标记需要懒加载的 tab 内容，具体用法见示例。

[nz-tab-link]directive

选项卡头显示链接，在路由联动模式下使用。

路由联动

路由联动可以让 tab 的切换和路由行为相一致。使用此功能时，title 必须通过 nz-tab-link 组件指定。