Tabs

Tabs make it easy to switch between different views.

When To Use#

Ant Design has 3 types of Tabs for different situations.

  • Card Tabs: for managing too many closeable views.
  • Normal Tabs: for functional aspects of a page.
  • RadioButton: for secondary tabs.
import { NzTabsModule } from 'ng-zorro-antd/tabs';

Examples

Content of Tab Pane 1
Basic

Default activate first tab.

expand codeexpand code
      Loading...
Tab 1
Disabled

Disabled a tab.

expand codeexpand code
      Loading...
Content of Tab Pane 1
Centered

Centered tabs.

expand codeexpand code
      Loading...
Tab 1
Icon

The Tab with Icon.

expand codeexpand code
      Loading...
Content of tab 27
Slide

Tab can be slide to left or right(up or down), which is used for a lot of tabs.

expand codeexpand code
      Loading...
Content of tab 1
Extra content

You can add extra actions to the right of Tabs.

expand codeexpand code
      Loading...
Content of tab 1
Size

Large size tabs are usually used in page header, and small size could be used in Modal.

expand codeexpand code
      Loading...
Tab position: top
Content of tab 1
Position

Tab's position: left, right, top or bottom.

expand codeexpand code
      Loading...
Content of Tab Pane 1
Card type tab

Another type Tabs, which doesn't support vertical mode.

expand codeexpand code
      Loading...
Content of Tab 1
Add & close tab

Only card type Tabs support adding & closable.

expand codeexpand code
      Loading...

Content of Tab Pane 1

Content of Tab Pane 1

Content of Tab Pane 1

Container of card type Tab

Should be used at the top of container, needs to override styles.

expand codeexpand code
      Loading...
Content of Tab 1
Customized trigger of new tab

Bind event for customized trigger.

expand codeexpand code
      Loading...
eagerly
LazyLoad

By default, the contents in nz-tab are eagerly loaded. Tab contents can be lazy loaded by declaring the body in a ng-template with the [nz-tab] directive.

Combine with nzDestroyInactiveTabPane to destroy the component when the tab is hidden.

expand codeexpand code
      Loading...
Content of tab 1
Tab guard

Via nzCanDeactivate to determine if a tab can be deactivated.

expand codeexpand code
      Loading...

API#

nz-tabset#

PropertyDescriptionTypeDefaultGlobal Config
[nzSelectedIndex]Current tab's indexnumber-
[nzAnimated]Whether to change tabs with animation. Only works while nzTabPosition="top" | "bottom"boolean | {inkBar:boolean, tabPane:boolean}true, false when type="card"✅
[nzSize]preset tab bar size'large' | 'small' | 'default''default'✅
[nzTabBarExtraContent]Extra content in tab barTemplateRef<void>-
[nzTabBarStyle]Tab bar style objectobject-
[nzTabPosition]Position of tabs'top' | 'right' | 'bottom' | 'left''top'
[nzType]Basic style of tabs'line' | 'card' | 'editable-card''line'✅
[nzTabBarGutter]The gap between tabsnumber-✅
[nzHideAll]Whether hide all tabsbooleanfalse
[nzLinkRouter]Link with Angular router. It supports child mode and query param modebooleanfalse
[nzLinkExact]Use exact routing matchingbooleantrue
[nzCanDeactivate]Determine if a tab can be deactivatedNzTabsCanDeactivateFn-
[nzCentered]Centers tabsbooleanfalse
[nzDestroyInactiveTabPane]Whether destroy inactive TabPane when change tabbooleanfalse
(nzSelectedIndexChange)Current tab's index change callbackEventEmitter<number>-
(nzSelectChange)Current tab's change callbackEventEmitter<{index: number,tab: NzTabComponent}>-

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

PropertyDescriptionTypeDefaultGlobal Config
[nzHideAdd]Hide plus icon or notbooleanfalse
[nzAddIcon]Add iconstring | TemplateRef<void>-
(nzAdd)When add button clicked emitEventEmitter<>-
(nzClose)When close button clicked emitEventEmitter<{ index: number }>-

nz-tab#

PropertyDescriptionTypeDefault
[nzTitle]Show text in tab's headstring | TemplateRef<void>-
[nzForceRender]Forced render of content in tabs, not lazy render after clicking on tabsbooleanfalse
[nzDisabled]tab disableboolean-
(nzClick)title click callbackEventEmitter<void>-
(nzContextmenu)title contextmenu callbackEventEmitter<MouseEvent>-
(nzSelect)title select callbackEventEmitter<void>-
(nzDeselect)title deselect callbackEventEmitter<void>-

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

PropertyDescriptionTypeDefaultGlobal Config
[nzClosable]Show close icon or notbooleanfalse
[nzCloseIcon]Close iconstring | TemplateRef<void>-

Template variable references of nz-tab[nzTitle]#

PropertyDescriptionType
visibleIs the title in the visible area, will be rendered to the dropdown menu if false.boolean

Use in nz-tab[nzTitle]

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

Use in *nzTabLink

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

[nz-tab]#

Tab contents can be lazy loaded by declaring the body in a ng-template with the [nz-tab] attribute.

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

Show a link in tab's head. Used in router link mode.

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