• Tabs标签页
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-tabsetcomponent
      • nz-tabcomponent
      • [nz-tab]directive
      • [nz-tab-link]directive
      • 路由联动

    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 组件指定。