Skeleton加载占位图

在需要等待加载内容的位置提供一个占位图。

何时使用

  • 网络较慢,需要长时间等待加载处理的情况下。
  • 图文信息内容较多的列表/卡片中。

单独引入此组件

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

  1. import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

代码演示

Skeleton加载占位图 - 图1

基本

最简单的用法。

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

Skeleton加载占位图 - 图2

复杂的组合

更复杂的组合。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-skeleton-complex',
  4. template: `
  5. <nz-skeleton [nzAvatar]="true" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
  6. `
  7. })
  8. export class NzDemoSkeletonComplexComponent {}

Skeleton加载占位图 - 图3

动画效果

显示动画效果。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-skeleton-active',
  4. template: `
  5. <nz-skeleton [nzActive]="true"></nz-skeleton>
  6. `
  7. })
  8. export class NzDemoSkeletonActiveComponent {}

Skeleton加载占位图 - 图4

包含子组件

加载占位图包含子组件。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-skeleton-children',
  4. template: `
  5. <div class="article">
  6. <nz-skeleton [nzLoading]="loading">
  7. <h4>Ant Design, a design language</h4>
  8. <p>
  9. We supply a series of design principles, practical patterns and high quality design resources (Sketch and
  10. Axure), to help people create their product prototypes beautifully and efficiently.
  11. </p>
  12. </nz-skeleton>
  13. <button nz-button (click)="showSkeleton()" [disabled]="loading">
  14. Show Skeleton
  15. </button>
  16. </div>
  17. `,
  18. styles: [
  19. `
  20. .article h4 {
  21. margin-bottom: 16px;
  22. }
  23. .article button {
  24. margin-top: 16px;
  25. }
  26. `
  27. ]
  28. })
  29. export class NzDemoSkeletonChildrenComponent {
  30. loading = false;
  31. showSkeleton(): void {
  32. this.loading = true;
  33. setTimeout(() => {
  34. this.loading = false;
  35. }, 3000);
  36. }
  37. }

Skeleton加载占位图 - 图5

列表样例

在列表组件中使用加载占位符。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-skeleton-list',
  4. template: `
  5. <nz-switch [(ngModel)]="loading"></nz-switch>
  6. <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'vertical'">
  7. <ng-template #item let-item>
  8. <nz-list-item
  9. [nzContent]="loading ? ' ' : item.content"
  10. [nzActions]="loading ? [] : [starAction, likeAction, msgAction]"
  11. [nzExtra]="loading ? '' : extra"
  12. >
  13. <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzAvatar]="true">
  14. <ng-template #starAction><i nz-icon nzType="star-o" style="margin-right: 8px;"></i> 156</ng-template>
  15. <ng-template #likeAction><i nz-icon nzType="like-o" style="margin-right: 8px;"></i> 156</ng-template>
  16. <ng-template #msgAction><i nz-icon nzType="message" style="margin-right: 8px;"></i> 2</ng-template>
  17. <nz-list-item-meta [nzAvatar]="item.avatar" [nzTitle]="nzTitle" [nzDescription]="item.description">
  18. <ng-template #nzTitle
  19. ><a href="{{ item.href }}">{{ item.title }}</a></ng-template
  20. >
  21. </nz-list-item-meta>
  22. <ng-template #extra>
  23. <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
  24. </ng-template>
  25. </nz-skeleton>
  26. </nz-list-item>
  27. </ng-template>
  28. </nz-list>
  29. `
  30. })
  31. export class NzDemoSkeletonListComponent {
  32. loading = true;
  33. listData = new Array(3).fill({}).map((_i, index) => {
  34. return {
  35. href: 'http://ng.ant.design',
  36. title: `ant design part ${index}`,
  37. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  38. description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  39. content:
  40. 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  41. };
  42. });
  43. }

API

nz-skeletoncomponent

属性说明类型默认值
[nzActive]是否展示动画效果booleanfalse
[nzAvatar]是否显示头像占位图boolean | NzSkeletonAvatarfalse
[nzLoading]true 时,显示占位图。反之则直接展示子组件boolean-
[nzParagraph]是否显示段落占位图boolean | NzSkeletonParagraphtrue
[nzTitle]是否显示标题占位图boolean | NzSkeletonTitletrue

NzSkeletonAvatar

属性说明类型默认值
size设置头像占位图的大小'large' | 'small' | 'default'-
shape指定头像的形状'circle' | 'square'-

NzSkeletonTitle

属性说明类型默认值
width设置标题占位图的宽度number | string-

NzSkeletonParagraph

属性说明类型默认值
rows设置段落占位图的行数number-
width设置标题占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度number | string | Array<number | string>-