Tabs标签页

选项卡切换组件。

何时使用

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

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

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
  • RadioButton 可作为更次级的页签来使用。
  1. import { NzTabsModule } from 'ng-zorro-antd/tabs';

代码演示Tabs标签页 - 图2

Tabs标签页 - 图3

基本

默认选中第一项。

  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标签页 - 图4

禁用

禁用某一项。

  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标签页 - 图5

图标

有图标的标签。

  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>
  9.           <i nz-icon [nzType]="tab.icon"></i>
  10.           {{ tab.name }}
  11.         </ng-template>
  12.         {{ tab.name }}
  13.       </nz-tab>
  14.     </nz-tabset>
  15.   `
  16. })
  17. export class NzDemoTabsIconComponent {
  18.   tabs = [
  19.     {
  20.       name: 'Tab 1',
  21.       icon: 'apple'
  22.     },
  23.     {
  24.       name: 'Tab 2',
  25.       icon: 'android'
  26.     }
  27.   ];
  28. }

Tabs标签页 - 图6

滑动

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

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

Tabs标签页 - 图7

附加内容

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

  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标签页 - 图8

大小

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

  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: 'large' | 'default' | 'small' = 'small';
  18.   tabs = [1, 2, 3];
  19. }

Tabs标签页 - 图9

位置

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

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

Tabs标签页 - 图10

卡片式页签

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-card',
  5.   template: `
  6.     <nz-tabset 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标签页 - 图11

新增和关闭页签

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tabs-editable-card',
  5.   template: `
  6.     <nz-tabset [(nzSelectedIndex)]="selectedIndex" nzType="editable-card" (nzAdd)="newTab()" (nzClose)="closeTab($event)">
  7.       <nz-tab *ngFor="let tab of tabs" nzClosable [nzTitle]="tab">Content of {{ tab }}</nz-tab>
  8.     </nz-tabset>
  9.   `
  10. })
  11. export class NzDemoTabsEditableCardComponent {
  12.   tabs = ['Tab 1', 'Tab 2'];
  13.   selectedIndex = 0;
  15.   closeTab({ index }: { index: number }): void {
  16.     this.tabs.splice(index, 1);
  17.   }
  19.   newTab(): void {
  20.     this.tabs.push('New Tab');
  21.     this.selectedIndex = this.tabs.length;
  22.   }
  23. }

Tabs标签页 - 图12

卡片式页签容器

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

  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 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 p {
  26.         margin: 0;
  27.       }
  28.       .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content {
  29.         height: 120px;
  30.         margin-top: -16px;
  31.       }
  32.       .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  33.         background: #fff;
  34.         padding: 16px;
  35.       }
  36.       .card-container ::ng-deep > .ant-tabs-card > .ant-tabs-nav::before {
  37.         display: none;
  38.       }
  39.       .card-container ::ng-deep > .ant-tabs-card .ant-tabs-tab {
  40.         border-color: transparent;
  41.         background: transparent;
  42.       }
  43.       .card-container ::ng-deep > .ant-tabs-card .ant-tabs-tab-active {
  44.         border-color: #fff;
  45.         background: #fff;
  46.       }
  47.     `
  48.   ]
  49. })
  50. export class NzDemoTabsCardTopComponent {
  51.   tabs = [1, 2, 3];
  52. }

Tabs标签页 - 图13

自定义新增页签触发器

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

  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 [(nzSelectedIndex)]="index" nzType="editable-card" nzHideAdd (nzClose)="closeTab($event)">
  10.       <nz-tab *ngFor="let tab of tabs; let i = index" [nzClosable]="i > 1" [nzTitle]="tab">Content of {{ tab }}</nz-tab>
  11.     </nz-tabset>
  12.   `
  13. })
  14. export class NzDemoTabsCustomAddTriggerComponent {
  15.   index = 0;
  16.   tabs = ['Tab 1', 'Tab 2'];
  18.   closeTab({ index }: { index: number }): void {
  19.     this.tabs.splice(index, 1);
  20.   }
  22.   newTab(): void {
  23.     this.tabs.push('New Tab');
  24.     this.index = this.tabs.length - 1;
  25.   }
  26. }

Tabs标签页 - 图14

懒加载

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

  1. /* declarations: 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标签页 - 图15

路由联动

与路由联动，点击 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 *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">Default</a>
  9.         Default.
  10.       </nz-tab>
  11.       <nz-tab>
  12.         <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'two' }" queryParamsHandling="merge">Two</a>
  13.         Two.
  14.       </nz-tab>
  15.       <nz-tab>
  16.         <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'three' }" queryParamsHandling="merge">Three</a>
  17.         Three.
  18.       </nz-tab>
  19.       <nz-tab>
  20.         <a *nzTabLink 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 {}

Tabs标签页 - 图16

标签守卫

通过 nzCanDeactivate 决定一个 tab 是否可以被切换。

  1. import { ChangeDetectionStrategy, Component } from '@angular/core';
  2. import { NzModalService } from 'ng-zorro-antd/modal';
  3. import { NzTabsCanDeactivateFn } from 'ng-zorro-antd/tabs';
  4. import { Observable } from 'rxjs';
  6. @Component({
  7.   selector: 'nz-demo-tabs-guard',
  8.   template: `
  9.     <nz-tabset [nzCanDeactivate]="canDeactivate">
  10.       <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab">Content of tab {{ tab }}</nz-tab>
  11.     </nz-tabset>
  12.   `,
  13.   changeDetection: ChangeDetectionStrategy.OnPush
  14. })
  15. export class NzDemoTabsGuardComponent {
  16.   tabs = [1, 2, 3, 4];
  17.   constructor(private modal: NzModalService) {}
  19.   canDeactivate: NzTabsCanDeactivateFn = (fromIndex: number, toIndex: number) => {
  20.     switch (fromIndex) {
  21.       case 0:
  22.         return toIndex === 1;
  23.       case 1:
  24.         return Promise.resolve(toIndex === 2);
  25.       case 2:
  26.         return this.confirm();
  27.       default:
  28.         return true;
  29.     }
  30.   };
  32.   private confirm(): Observable<boolean> {
  33.     return new Observable(observer => {
  34.       this.modal.confirm({
  35.         nzTitle: 'Are you sure you want to leave this tab?',
  36.         nzOnOk: () => {
  37.           observer.next(true);
  38.           observer.complete();
  39.         },
  40.         nzOnCancel: () => {
  41.           observer.next(false);
  42.           observer.complete();
  43.         }
  44.       });
  45.     });
  46.   }
  47. }

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’ | ‘editable-card’‘line’✅
[nzTabBarGutter]tabs 之间的间隙number-✅
[nzHideAll]是否隐藏所有tab内容booleanfalse
[nzLinkRouter]与 Angular 路由联动booleanfalse
[nzLinkExact]以严格匹配模式确定联动的路由booleantrue
[nzCanDeactivate]决定一个 tab 是否可以被切换NzTabsCanDeactivateFn-
[nzCentered]标签居中展示booleanfalse
(nzSelectedIndexChange)当前激活 tab 面板的 序列号变更回调函数EventEmitter<number>-
(nzSelectChange)当前激活 tab 面板变更回调函数EventEmitter<{index: number,tab: NzTabComponent}>-

nz-tabset[nzType=”editable-card”]component

参数说明类型默认值全局配置
[nzHideAdd]隐藏添加按钮booleanfalse
[nzAddIcon]添加按钮图标string | TemplateRef<void>-
(nzAdd)点击添加按钮时的事件EventEmitter<>-
(nzClose)点击删除按钮时的事件EventEmitter<{ index: number }>-

nz-tabcomponent

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

nz-tabset[nzType=”editable-card”] > nz-tabcomponent

参数说明类型默认值全局配置
[nzClosable]显示删除按钮booleanfalse
[nzCloseIcon]关闭按钮图标string | TemplateRef<void>-

nz-tab[nzTitle] 的模版引用变量

属性说明类型
visible表示是否在可见区域, 为 false 时将会被渲染到下拉菜单中boolean

在 nz-tab[nzTitle] 中使用

  1. <nz-tab [nzTitle]="titleTemplate">
  2.   ...
  3.   <ng-template #titleTemplate let-visible="visible">...</ng-template>
  4. </nz-tab>

在 *nzTabLink 中使用

  1. <nz-tab>
  2.   <a *nzTabLink="let visible = visible" nz-tab-link [routerLink]="['.']">...</a>
  3. </nz-tab>

[nz-tab]directive

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

ng-template[nzTabLink] > a[nz-tab-link]

路由联动可以让 tab 的切换和路由行为相一致。

  1. <nz-tabset nzLinkRouter>
  2.   <nz-tab>
  3.     <a *nzTabLink nz-tab-link [routerLink]="['.']">Link</a>
  4.     Default.
  5.   </nz-tab>
  6. </nz-tabset>