概述
Avatar
:占位头像,默认为圆形,默认尺寸:Avatar medium:width: 48px
,height: 48px
。支持 Avatar 的 size 属性 (v>=1.0)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 | 是否展示动画效果 | boolean | false |
className | 类名 | string | - |
loading | 为 true 时,显示占位元素。反之则显示子组件 | boolean | true |
placeholder | 加载等待时的占位元素 | ReactNode | - |
style | 样式 | CSSProperties | - |
Skeleton.Avatar
Skeleton.Image
,Skeleton.Title
,Skeleton.Button
API 与Skeleton.Avatar
相同
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 类名 | string | - |
size | 设置头像的大小,支持 extra-extra-small , extra-small 、small 、medium 、large 、extra-large v>=1.0 | string | medium |
style | 样式 | CSSProperties | - |
Skeleton.Paragraph
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 类名 | string | - |
rows | 设置段落占位图的行数 | number | 4 |
style | 样式 | CSSProperties | - |