Empty空状态

空状态时的展示占位图。

何时使用

当目前没有数据时,用于显式的用户提示。

  1. import { NzEmptyModule } from 'ng-zorro-antd/empty';

代码演示

Empty空状态 - 图1

基本

简单的展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-basic',
  4. template: `
  5. <nz-empty></nz-empty>
  6. `
  7. })
  8. export class NzDemoEmptyBasicComponent {}

Empty空状态 - 图2

选择图片

可以通过设置 nzNotFoundImagesimple 选择另一种风格的图片。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-simple',
  4. template: `
  5. <nz-empty nzNotFoundImage="simple"></nz-empty>
  6. `
  7. })
  8. export class NzDemoEmptySimpleComponent {}

Empty空状态 - 图3

自定义

自定义图片、描述、附属内容。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-customize',
  4. template: `
  5. <nz-empty
  6. nzNotFoundImage="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
  7. [nzNotFoundContent]="contentTpl"
  8. [nzNotFoundFooter]="footerTpl"
  9. >
  10. <ng-template #contentTpl>
  11. <span> Customize <a href="#API">Description</a> </span>
  12. </ng-template>
  13. <ng-template #footerTpl>
  14. <button nz-button nzType="primary" (click)="onClick()">Create Now</button>
  15. </ng-template>
  16. </nz-empty>
  17. `
  18. })
  19. export class NzDemoEmptyCustomizeComponent {
  20. onClick(): void {
  21. console.log('clicked');
  22. }
  23. }

Empty空状态 - 图4

全局化配置

自定义全局组件的 Empty 样式。

  1. import { Component, TemplateRef, ViewChild } from '@angular/core';
  2. import { NzConfigService } from 'ng-zorro-antd/core/config';
  3. @Component({
  4. selector: 'nz-demo-empty-config',
  5. template: `
  6. <nz-switch
  7. [nzUnCheckedChildren]="'default'"
  8. [nzCheckedChildren]="'customize'"
  9. [(ngModel)]="customize"
  10. (ngModelChange)="onConfigChange()"
  11. >
  12. </nz-switch>
  13. <nz-divider></nz-divider>
  14. <h3>Select</h3>
  15. <nz-select style="width: 200px"></nz-select>
  16. <h3>TreeSelect</h3>
  17. <nz-tree-select style="width: 200px;"></nz-tree-select>
  18. <h3>Cascader</h3>
  19. <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="[]"></nz-cascader>
  20. <h3>Transfer</h3>
  21. <nz-transfer></nz-transfer>
  22. <h3>Table</h3>
  23. <nz-table [nzData]="[]">
  24. <thead>
  25. <tr>
  26. <th>Title</th>
  27. <th>Age</th>
  28. </tr>
  29. </thead>
  30. <tbody></tbody>
  31. </nz-table>
  32. <h3>List</h3>
  33. <nz-list [nzDataSource]="[]"></nz-list>
  34. <ng-template #customTpl let-name>
  35. <div style="text-align: center;">
  36. <i nz-icon nzType="smile" style="font-size: 20px;"></i>
  37. <p>Data Not Found in {{ name }}</p>
  38. </div>
  39. </ng-template>
  40. `,
  41. styles: [
  42. `
  43. h3 {
  44. font-size: inherit;
  45. margin: 16px 0 8px 0;
  46. }
  47. `
  48. ]
  49. })
  50. export class NzDemoEmptyConfigComponent {
  51. @ViewChild('customTpl', { static: false }) customTpl: TemplateRef<any>; // tslint:disable-line:no-any
  52. customize = false;
  53. constructor(private nzConfigService: NzConfigService) {}
  54. onConfigChange(): void {
  55. if (this.customize) {
  56. this.nzConfigService.set('empty', { nzDefaultEmptyContent: this.customTpl });
  57. } else {
  58. this.nzConfigService.set('empty', { nzDefaultEmptyContent: undefined });
  59. }
  60. }
  61. }

Empty空状态 - 图5

无描述

无描述展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-description',
  4. template: `
  5. <nz-empty [nzNotFoundContent]="null"></nz-empty>
  6. `
  7. })
  8. export class NzDemoEmptyDescriptionComponent {}

API

nz-emptycomponent

参数说明类型默认值
[nzNotFoundImage]设置显示图片,为 string 时表示自定义图片地址string | TemplateRef<void>-
[nzNotFoundContent]自定义描述内容string | TemplateRef<void> | null-
[nzNotFoundFooter]设置自定义 footerstring | TemplateRef<void>-

NZ_CONFIG

nzEmpty 接口有如下字段:

参数说明类型
nzDefaultEmptyContent用户自定义的全局空组件,可通过 undefined 来取消自定义的全局空组件Type<any>|TemplateRef<string>|string|undefined

InjectionToken

Token说明参数
NZ_EMPTY_COMPONENT_NAME将会被注入到用户的全局自定义空组件中,告诉该组件其所在组件的名称string

全局自定义空组件

你或许知道或者用过一些类似 nzNotFoundContent 的属性来自定义组件数据为空时的内容,现在它们都会使用 Empty 组件。你可以通过在 NZ_CONFIG 中提供 { empty: { nzDefaultEmptyContent: something } } 来定义一个自定义的全局空组件。