反馈类 · Skeleton
骨架屏
在需要等待加载内容的位置提供的占位组件。

概述

  • Avatar：占位头像，默认为圆形，默认尺寸：Avatar medium: width: 48px，height: 48px。支持 Avatar 的 size（v1.0后支持)、shape 属性 (v2.20后支持)
  • Image：占位图像，默认尺寸：width: 100%，height: 100%。
  • Title：占位标题，默认尺寸：width: 100%， height: 24px。
  • Paragraph：占位内容部分，默认尺寸：width: 100%，height: 16px，margin-bottom: 10px。
  • Button：占位按钮，默认尺寸：width: 115px，height: 32px。
注意：默认样式均可通过 className 或 style 进行自定义。

代码演示

如何引入

基本使用

组合使用

图片和标题。
统计数字。
头像和标题。
居中段落和按钮。
头像、标题和段落。
表格。

加载动画

通过设置 active 属性可以展示动画效果。

API 参考

Skeleton

属性说明类型默认值
active是否展示动画效果booleanfalse
className类名string-
loading为 true 时，显示占位元素。反之则显示子组件booleantrue
placeholder加载等待时的占位元素ReactNode-
style样式CSSProperties-

Skeleton.Avatar

Skeleton.Image，Skeleton.Title，Skeleton.Button 大部分API 与 Skeleton.Avatar 相同。其中 shape 仅 Skeleton.Avatar支持
属性说明类型默认值
className类名string-
size设置头像的大小，支持 extra-extra-small, extra-small、small、medium、large、extra-large v>=1.0stringmedium
style样式CSSProperties-
shape指定头像的形状，支持 circle、squarestringcircle

Skeleton.Paragraph

属性说明类型默认值
className类名string-
rows设置段落占位图的行数number4
style样式CSSProperties-

文案规范

  • 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示

设计变量