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

概述

  • Avatar:占位头像,默认为圆形,默认尺寸:Avatar medium: width: 48pxheight: 48px。支持 Avatar 的 size 属性 (v>=1.0)
  • 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 相同
属性说明类型默认值
className类名string-
size设置头像的大小,支持 extra-extra-small, extra-smallsmallmediumlargeextra-large v>=1.0stringmedium
style样式CSSProperties-

Skeleton.Paragraph

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

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED