nav:
path: /components
group:
title: 反馈
order: 12
toc: 'content'
Skeleton 骨架屏
在需要等待加载内容的位置提供一个占位图形组合
何时使用
- 网络较慢,需要长时间等待加载,并且只在第一次加载的时候使用。
- 在确保手机性能的前提下,尽量使用预加载,最好不用骨架屏。
- 适用于图文信息较多且重要的首页、列表、卡片中。小的模块类组件(例如弹窗)不要使用。
代码示例
API
Skeleton
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
avatar |
是否显示头像占位图 |
boolean \| Avatar |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
paragraph |
段落 |
number \| Paragraph |
true |
style |
样式 |
CSSProperties |
- |
title |
是否显示标题占位图 |
boolean |
true |
Avatar
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
shape |
头像形状 circle 或 square |
string |
square |
size |
头像大小 x-small 、small 、medium 或 large |
string |
medium |
style |
样式 |
CSSProperties |
- |
Paragraph 段落
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
rows |
段落行数,大于 0 展示 |
number |
3 |
style |
样式 |
CSSProperties |
- |
Title 标题
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
style |
样式 |
CSSProperties |
- |
Button 按钮
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
size |
大小,small 、medium 或 large |
string |
medium |
style |
样式 |
CSSProperties |
- |
Input 输入框
属性 |
说明 |
类型 |
默认值 |
animate |
是否展示动画效果 |
boolean |
false |
className |
类名 |
string |
- |
loading |
为 true 时,显示占位图。反之则直接展示子组件 |
boolean |
true |
style |
样式 |
CSSProperties |
- |