Tabs标签页

选项卡切换组件。

何时使用#

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

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

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

代码演示

Content of Tab Pane 1
基本

默认选中第一项。

expand codeexpand code
      加载中
Tab 1
禁用

禁用某一项。

expand codeexpand code
      加载中
Content of Tab Pane 1
居中

标签居中展示。

expand codeexpand code
      加载中
Tab 1
图标

有图标的标签。

expand codeexpand code
      加载中
Content of tab 27
滑动

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

expand codeexpand code
      加载中
Content of tab 1
附加内容

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

expand codeexpand code
      加载中
Content of tab 1
大小

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

expand codeexpand code
      加载中
Tab position: top
Content of tab 1
位置

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

expand codeexpand code
      加载中
Content of Tab Pane 1
卡片式页签

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

expand codeexpand code
      加载中
Content of Tab 1
新增和关闭页签

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

expand codeexpand code
      加载中

Content of Tab Pane 1

Content of Tab Pane 1

Content of Tab Pane 1

卡片式页签容器

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

expand codeexpand code
      加载中
Content of Tab 1
自定义新增页签触发器

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

expand codeexpand code
      加载中
eagerly
延迟加载

默认情况下，nz-tab 中的组件是立即加载的。可以通过在 ng-template 中使用 [nz-tab] 指令来实现延迟加载选项卡内容。

配合 nzDestroyInactiveTabPane 使用，可以实现 tab 隐藏时销毁组件。

expand codeexpand code
      加载中
Content of tab 1
标签守卫

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

expand codeexpand code
      加载中
Content of Tab Pane 1
可拖拽标签

通过 CDK DragDropModule 实现标签可拖拽。

expand codeexpand code
      加载中

API#

nz-tabset#

参数说明类型默认值全局配置
[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
[nzDestroyInactiveTabPane]被隐藏时是否销毁 DOM 结构booleanfalse
(nzSelectedIndexChange)当前激活 tab 面板的 序列号变更回调函数EventEmitter<number>-
(nzSelectChange)当前激活 tab 面板变更回调函数EventEmitter<{index: number,tab: NzTabComponent}>-

nz-tabset[nzType="editable-card"]#

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

nz-tab#

参数说明类型默认值
[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-tab#

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

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

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

在 nz-tab[nzTitle] 中使用

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

在 *nzTabLink 中使用

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

[nz-tab]#

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

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

<nz-tabset nzLinkRouter>
  <nz-tab>
    <a *nzTabLink nz-tab-link [routerLink]="['.']">Link</a>
    Default.
  </nz-tab>
</nz-tabset>