Skeleton骨架屏

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

基本

最简单的用法。

@Component({
  selector: 'nz-demo-skeleton-basic',
  template: `
    <nz-skeleton></nz-skeleton>
  `
})
export class NzDemoSkeletonBasicComponent {}

复杂的组合

动画效果

显示动画效果。

@Component({
  selector: 'nz-demo-skeleton-active',
  template: `
    <nz-skeleton [nzActive]="true"></nz-skeleton>
  `
})
export class NzDemoSkeletonActiveComponent {}

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

包含子组件

加载占位图包含子组件。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-skeleton-children',
  template: `
    <div class="article">
      <nz-skeleton [nzLoading]="loading">
        <h4>Ant Design, a design language</h4>
        <p>
          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.
        </p>
      </nz-skeleton>
      <button nz-button (click)="showSkeleton()" [disabled]="loading">
        Show Skeleton
    </div>
  styles: [
    `
      .article h4 {
        margin-bottom: 16px;
      }
      .article button {
        margin-top: 16px;
      }
    `
  ]
})
export class NzDemoSkeletonChildrenComponent {
  loading = false;
  showSkeleton(): void {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
}

列表样例

NzSkeletonAvatar

NzSkeletonParagraph

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