Tabs标签页

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

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

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

    基本

    默认选中第一项。

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

    图标

    有图标的标签。

    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标签页 - 图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">
    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]="10" [(ngModel)]="selectedIndex"></nz-input-number>
    12.     <nz-tabset style="height:220px;" [nzTabPosition]="nzTabPosition" [(nzSelectedIndex)]="selectedIndex" (nzSelectChange)="log([$event])">
    13.       <nz-tab
    14.         *ngFor="let tab of tabs"
    15.         [nzTitle]="tab.name"
    16.         (nzSelect)="log(['select', tab])"
    17.         (nzClick)="log(['click', tab])"
    18.         (nzDeselect)="log(['deselect', tab])"
    19.       >
    20.         {{ tab.content }}
    21.       </nz-tab>
    22.     </nz-tabset>
    23.   `
    24. })
    25. export class NzDemoTabsSlideComponent implements OnInit {
    26.   tabs: Array<{ name: string; content: string }> = [];
    27.   nzTabPosition: NzTabPosition = 'top';
    28.   selectedIndex = 0;
    30.   /* tslint:disable-next-line:no-any */
    31.   log(args: any[]): void {
    32.     console.log(args);
    33.   }
    35.   ngOnInit(): void {
    36.     for (let i = 0; i < 11; i++) {
    37.       this.tabs.push({
    38.         name: `Tab ${i}`,
    39.         content: `Content of tab ${i}`
    40.     }
    41.   }
    42. }

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

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

    位置

    有四个位置，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：
    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" [nzType]="'line'">
    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 [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. }

    新增和关闭页签

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

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

    卡片式页签容器

    自定义新增页签触发器

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

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

    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 {
    49.     console.log(`I will init eagerly`);
    50.   }
    51. }

    路由联动

    与路由联动，点击 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 {}

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

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

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

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