2018-08-22 23:34:36 +08:00
|
|
|
---
|
|
|
|
category: Components
|
2018-10-26 00:13:54 +08:00
|
|
|
subtitle: 骨架屏
|
2022-11-09 12:28:04 +08:00
|
|
|
group: 反馈
|
2018-08-22 23:34:36 +08:00
|
|
|
title: Skeleton
|
2022-11-30 20:14:41 +08:00
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original
|
2023-02-09 22:17:31 +08:00
|
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
|
2018-08-22 23:34:36 +08:00
|
|
|
---
|
|
|
|
|
2018-10-26 00:13:54 +08:00
|
|
|
在需要等待加载内容的位置提供一个占位图形组合。
|
2018-08-22 23:34:36 +08:00
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
|
|
- 网络较慢,需要长时间等待加载处理的情况下。
|
|
|
|
- 图文信息内容较多的列表/卡片中。
|
2019-11-12 22:43:50 +08:00
|
|
|
- 只在第一次加载数据的时候使用。
|
2019-01-29 15:23:23 +08:00
|
|
|
- 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
|
2018-08-22 23:34:36 +08:00
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
## 代码演示
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
<!-- prettier-ignore -->
|
2022-11-09 12:28:04 +08:00
|
|
|
<code src="./demo/basic.tsx">基本</code>
|
|
|
|
<code src="./demo/complex.tsx">复杂的组合</code>
|
|
|
|
<code src="./demo/active.tsx">动画效果</code>
|
|
|
|
<code src="./demo/element.tsx">按钮/头像/输入框/图像/自定义节点</code>
|
|
|
|
<code src="./demo/children.tsx">包含子组件</code>
|
|
|
|
<code src="./demo/list.tsx">列表</code>
|
|
|
|
|
2018-08-22 23:34:36 +08:00
|
|
|
## API
|
|
|
|
|
|
|
|
### Skeleton
|
|
|
|
|
2019-11-20 17:46:50 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| active | 是否展示动画效果 | boolean | false |
|
2022-12-22 14:12:26 +08:00
|
|
|
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false |
|
2020-07-02 16:13:17 +08:00
|
|
|
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | - |
|
2022-12-22 14:12:26 +08:00
|
|
|
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true |
|
2020-07-02 16:13:17 +08:00
|
|
|
| round | 为 true 时,段落和标题显示圆角 | boolean | false |
|
2022-12-22 14:12:26 +08:00
|
|
|
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true |
|
2018-08-22 23:34:36 +08:00
|
|
|
|
|
|
|
### SkeletonAvatarProps
|
|
|
|
|
2019-12-03 13:33:04 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| active | 是否展示动画效果,仅在单独使用头像骨架时生效 | boolean | false |
|
2020-01-17 17:23:48 +08:00
|
|
|
| shape | 指定头像的形状 | `circle` \| `square` | - |
|
2020-10-21 10:33:43 +08:00
|
|
|
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
|
2018-08-22 23:34:36 +08:00
|
|
|
|
|
|
|
### SkeletonTitleProps
|
|
|
|
|
2021-06-10 00:38:55 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
|
|
| ----- | -------------------- | ---------------- | ------ |
|
|
|
|
| width | 设置标题占位图的宽度 | number \| string | - |
|
2018-08-22 23:34:36 +08:00
|
|
|
|
|
|
|
### SkeletonParagraphProps
|
|
|
|
|
2019-11-20 17:46:50 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| rows | 设置段落占位图的行数 | number | - |
|
2020-10-21 10:33:43 +08:00
|
|
|
| width | 设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
|
2019-11-21 20:23:56 +08:00
|
|
|
|
|
|
|
### SkeletonButtonProps
|
|
|
|
|
2022-06-24 12:30:47 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
| active | 是否展示动画效果 | boolean | false | |
|
|
|
|
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
|
|
| shape | 指定按钮的形状 | `circle` \| `round` \| `square` \| `default` | - | |
|
|
|
|
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | |
|
2019-12-19 11:56:50 +08:00
|
|
|
|
|
|
|
### SkeletonInputProps
|
|
|
|
|
2021-06-10 00:38:55 +08:00
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
|
|
| ------ | ---------------- | ------------------------------- | ------ |
|
|
|
|
| active | 是否展示动画效果 | boolean | false |
|
|
|
|
| size | 设置输入框的大小 | `large` \| `small` \| `default` | - |
|
2023-04-11 10:25:24 +08:00
|
|
|
|
|
|
|
## Design Token
|
|
|
|
|
|
|
|
<ComponentTokenTable component="Skeleton"></ComponentTokenTable>
|