Skeleton骨架屏

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

何时使用#

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

代码演示

基本

最简单的用法。

expand codeexpand code
      加载中

复杂的组合

更复杂的组合。

expand codeexpand code
      加载中

动画效果

显示动画效果。

expand codeexpand code
      加载中


Size:
Active:


Button Shape:
Avatar Shape:
按钮/头像/输入框/图像

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

expand codeexpand code
      加载中

Ant Design, a design language

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.

包含子组件

加载占位图包含子组件。

expand codeexpand code
      加载中

列表样例

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

expand codeexpand code
      加载中

API#

nz-skeleton#

属性说明类型默认值
[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"]#

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

nz-skeleton-element [nzType="avatar"]#

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

nz-skeleton-element [nzType="input"]#

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

nz-skeleton-element [nzType="image"]#

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