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

概述

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

代码演示

如何引入

基本使用

组合使用

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

加载动画

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

API 参考

Skeleton

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

Skeleton.Avatar

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

Skeleton.Paragraph

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

文案规范

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

设计变量