何时使用
- 网络较慢,需要长时间等待加载处理的情况下。
- 图文信息内容较多的列表/卡片中。
- 只在第一次加载数据的时候使用。
- 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
代码演示
基本
复杂的组合
动画效果
按钮/头像/输入框/图像/自定义节点
包含子组件
列表
自定义组件 Token
API
通用属性参考:通用属性
Skeleton
SkeletonAvatarProps
属性 |
说明 |
类型 |
默认值 |
active |
是否展示动画效果,仅在单独使用头像骨架时生效 |
boolean |
false |
shape |
指定头像的形状 |
circle | square |
- |
size |
设置头像占位图的大小 |
number | large | small | default |
- |
SkeletonTitleProps
属性 |
说明 |
类型 |
默认值 |
width |
设置标题占位图的宽度 |
number | string |
- |
SkeletonParagraphProps
属性 |
说明 |
类型 |
默认值 |
rows |
设置段落占位图的行数 |
number |
- |
width |
设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度 |
number | string | Array<number | string> |
- |
SkeletonButtonProps
属性 |
说明 |
类型 |
默认值 |
版本 |
active |
是否展示动画效果 |
boolean |
false |
|
block |
将按钮宽度调整为其父宽度的选项 |
boolean |
false |
4.17.0 |
shape |
指定按钮的形状 |
circle | round | square | default |
- |
|
size |
设置按钮的大小 |
large | small | default |
- |
|
SkeletonInputProps
属性 |
说明 |
类型 |
默认值 |
active |
是否展示动画效果 |
boolean |
false |
size |
设置输入框的大小 |
large | small | default |
- |
主题变量(Design Token)