Skeleton骨架屏

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

何时使用

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

代码演示

Skeleton骨架屏 - 图1

基本

最简单的用法。

  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骨架屏 - 图2

复杂的组合

更复杂的组合。

  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骨架屏 - 图3

动画效果

显示动画效果。

  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骨架屏 - 图4

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

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

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

Skeleton骨架屏 - 图5

包含子组件

加载占位图包含子组件。

  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骨架屏 - 图6

列表样例

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

  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 ? '' : 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

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’