Breadcrumb面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

  • 当系统拥有超过两级以上的层级结构时；
  • 当需要告知用户『你在哪里』时；
  • 当需要向上导航的功能时。

代码演示

Breadcrumb面包屑 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-breadcrumb-basic',
  5.   template: `
  6.     <nz-breadcrumb>
  7.       <nz-breadcrumb-item>
  8.         Home
  9.       </nz-breadcrumb-item>
  10.       <nz-breadcrumb-item>
  11.         <a>Application List</a>
  12.       </nz-breadcrumb-item>
  13.       <nz-breadcrumb-item>
  14.         An Application
  15.       </nz-breadcrumb-item>
  16.     </nz-breadcrumb>
  17.   `,
  18.   styles: []
  19. })
  20. export class NzDemoBreadcrumbBasicComponent {}

Breadcrumb面包屑 - 图2

路由

和 RouterLink 进行结合使用。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-breadcrumb-router',
  5.   template: `
  6.     <nz-breadcrumb>
  7.       <nz-breadcrumb-item>
  8.         <a [routerLink]="['../../']">Home</a>
  9.       </nz-breadcrumb-item>
  10.       <nz-breadcrumb-item>
  11.         Breadcrumb
  12.       </nz-breadcrumb-item>
  13.     </nz-breadcrumb>
  14.   `,
  15.   styles: []
  16. })
  17. export class NzDemoBreadcrumbRouterComponent {}

Breadcrumb面包屑 - 图3

分隔符

使用 nzSeparator 可以自定义分隔符。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-breadcrumb-separator',
  5.   template: `
  6.     <h4>String</h4>
  7.     <nz-breadcrumb nzSeparator=">">
  8.       <nz-breadcrumb-item>
  9.         Home
  10.       </nz-breadcrumb-item>
  11.       <nz-breadcrumb-item>
  12.         <a>Application List</a>
  13.       </nz-breadcrumb-item>
  14.       <nz-breadcrumb-item>
  15.         An Application
  16.       </nz-breadcrumb-item>
  17.     </nz-breadcrumb>
  18.     <br />
  19.     <h4>TemplateRef</h4>
  20.     <nz-breadcrumb [nzSeparator]="iconTemplate">
  21.       <nz-breadcrumb-item>
  22.         Home
  23.       </nz-breadcrumb-item>
  24.       <nz-breadcrumb-item>
  25.         <a>Application List</a>
  26.       </nz-breadcrumb-item>
  27.       <nz-breadcrumb-item>
  28.         An Application
  29.       </nz-breadcrumb-item>
  30.     </nz-breadcrumb>
  31.     <ng-template #iconTemplate><i nz-icon type="arrow-right"></i></ng-template>
  32.   `,
  33.   styles: [
  34.     `
  35.       h4:first-child {
  36.         margin-top: 0;
  37.       }
  39.       h4 {
  40.         margin: 16px 0;
  41.         font-size: 14px;
  42.         line-height: 1;
  43.         font-weight: normal;
  44.       }
  45.     `
  46.   ]
  47. })
  48. export class NzDemoBreadcrumbSeparatorComponent {}

Breadcrumb面包屑 - 图4

带有图标的

图标放在文字前面。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-breadcrumb-withIcon',
  5.   template: `
  6.     <nz-breadcrumb>
  7.       <nz-breadcrumb-item>
  8.         <i nz-icon type="home"></i>
  9.       </nz-breadcrumb-item>
  10.       <nz-breadcrumb-item>
  11.         <a><i nz-icon type="user"></i><span>Application List</span></a>
  12.       </nz-breadcrumb-item>
  13.       <nz-breadcrumb-item>
  14.         Application
  15.       </nz-breadcrumb-item>
  16.     </nz-breadcrumb>
  17.   `,
  18.   styles: []
  19. })
  20. export class NzDemoBreadcrumbWithIconComponent {}

Breadcrumb面包屑 - 图5

自动生成

通过配置 router.data 自动生成面包屑。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-breadcrumb-auto',
  5.   template: `
  6.     <nz-breadcrumb [nzAutoGenerate]="true">
  7.       Please refer to StackBlitz demo.
  8.     </nz-breadcrumb>
  9.   `
  10. })
  11. export class NzDemoBreadcrumbAutoComponent {}

API

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzBreadCrumbModule } from 'ng-zorro-antd';

nz-breadcrumbcomponent

参数说明类型默认值
[nzSeparator]分隔符自定义string｜TemplateRef<void>'/'
[nzAutoGenerate]自动生成 Breadcrumbbooleanfalse

使用 [nzAutoGenerate] 时，需要在路由类中定义 data:

  1. {
  2.   path: '/path',
  3.   component: SomeComponent,
  4.   data: {
  5.     breadcrumb: 'Display Name'
  6.   }
  7. }