Skeleton骨架屏

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

何时使用

  • 网络较慢，需要长时间等待加载处理的情况下。
  • 图文信息内容较多的列表/卡片中。
  • 只适合用在第一次加载数据的场景。
  • 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验
  1. import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

代码演示Skeleton骨架屏 - 图2

Skeleton骨架屏 - 图3

基本

最简单的用法。

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

Skeleton骨架屏 - 图4

复杂的组合

更复杂的组合。

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

Skeleton骨架屏 - 图5

动画效果

显示动画效果。

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

Skeleton骨架屏 - 图6

按钮/头像/输入框/图像

骨架按钮、头像、输入框和图像。

  1. import { Component } from '@angular/core';
  2. import {
  3.   NzSkeletonAvatarShape,
  4.   NzSkeletonAvatarSize,
  5.   NzSkeletonButtonShape,
  6.   NzSkeletonButtonSize,
  7.   NzSkeletonInputSize
  8. } from 'ng-zorro-antd/skeleton';
  10. @Component({
  11.   selector: 'nz-demo-skeleton-element',
  12.   template: `
  13.     <nz-space nzSize="middle">
  14.       <nz-space-item>
  15.         <nz-skeleton-element
  16.           nzType="button"
  17.           [nzActive]="elementActive"
  18.           [nzSize]="elementSize"
  19.           [nzShape]="buttonShape"
  20.         ></nz-skeleton-element>
  21.       </nz-space-item>
  22.       <nz-space-item>
  23.         <nz-skeleton-element
  24.           nzType="avatar"
  25.           [nzActive]="elementActive"
  26.           [nzSize]="elementSize"
  27.           [nzShape]="avatarShape"
  28.         ></nz-skeleton-element>
  29.       </nz-space-item>
  30.       <nz-space-item>
  31.         <nz-skeleton-element nzType="input" [nzActive]="elementActive" [nzSize]="elementSize" style="width:200px"></nz-skeleton-element>
  32.       </nz-space-item>
  33.     </nz-space>
  34.     <br />
  35.     <br />
  36.     <nz-skeleton-element nzType="image" [nzActive]="elementActive"></nz-skeleton-element>
  37.     <nz-divider></nz-divider>
  38.     <div nz-row nzAlign="middle" [nzGutter]="8">
  39.       <div nz-col nzSpan="10">
  40.         Size:
  41.         <nz-radio-group [(ngModel)]="elementSize">
  42.           <label nz-radio-button nzValue="default">Default</label>
  43.           <label nz-radio-button nzValue="large">Large</label>
  44.           <label nz-radio-button nzValue="small">Small</label>
  45.         </nz-radio-group>
  46.       </div>
  47.       <div nz-col nzSpan="5">
  48.         Active:
  49.         <nz-switch [(ngModel)]="elementActive"></nz-switch>
  50.       </div>
  51.     </div>
  52.     <br />
  53.     <br />
  54.     <div nz-row nzAlign="middle" [nzGutter]="8">
  55.       <div nz-col nzSpan="10">
  56.         Button Shape:
  57.         <nz-radio-group [(ngModel)]="buttonShape">
  58.           <label nz-radio-button nzValue="default">Default</label>
  59.           <label nz-radio-button nzValue="circle">Circle</label>
  60.           <label nz-radio-button nzValue="round">Round</label>
  61.         </nz-radio-group>
  62.       </div>
  63.       <div nz-col nzSpan="10">
  64.         Avatar Shape:
  65.         <nz-radio-group [(ngModel)]="avatarShape">
  66.           <label nz-radio-button nzValue="circle">Circle</label>
  67.           <label nz-radio-button nzValue="square">Square</label>
  68.         </nz-radio-group>
  69.       </div>
  70.     </div>
  71.   `
  72. })
  73. export class NzDemoSkeletonElementComponent {
  74.   buttonActive = false;
  75.   avatarActive = false;
  76.   inputActive = false;
  77.   imageActive = false;
  78.   buttonSize: NzSkeletonButtonSize = 'default';
  79.   avatarSize: NzSkeletonAvatarSize = 'default';
  80.   inputSize: NzSkeletonInputSize = 'default';
  81.   elementActive = false;
  82.   buttonShape: NzSkeletonButtonShape = 'default';
  83.   avatarShape: NzSkeletonAvatarShape = 'circle';
  84.   elementSize: NzSkeletonInputSize = 'default';
  85. }

Skeleton骨架屏 - 图7

包含子组件

加载占位图包含子组件。

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

Skeleton骨架屏 - 图8

列表样例

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

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

API

nz-skeletoncomponent

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

NzSkeletonAvatar

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

NzSkeletonTitle

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

NzSkeletonParagraph

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

nz-skeleton-element [nzType=”button”]component

属性说明类型默认值
[nzActive]是否展示动画效果booleanfalse
[nzSize]大小‘large’ | ‘small’ | ‘default’‘default’
[nzShape]形状‘circle’ | ‘round’ | ‘default’‘default’

nz-skeleton-element [nzType=”avatar”]component

属性说明类型默认值
[nzActive]是否展示动画效果booleanfalse
[nzSize]大小number | ‘large’ | ‘small’ | ‘default’‘default’
[nzShape]形状‘circle’ | ‘square’‘square’

nz-skeleton-element [nzType=”input”]component

属性说明类型默认值
[nzActive]是否展示动画效果booleanfalse
[nzSize]大小‘large’ | ‘small’ | ‘default’‘default’

nz-skeleton-element [nzType=”image”]component

属性说明类型默认值
[nzActive]是否展示动画效果booleanfalse