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

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

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’