mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 03:29:59 +08:00
02a0e6f160
* refactor: Skeleton.Button square shape style the Button's square shape style is same as Avator's that its width is equal to height, and the old square shape become the default shape that its width is double size to height. * fix: `ButtonShapeType` type annotation
68 lines
2.7 KiB
Markdown
68 lines
2.7 KiB
Markdown
---
|
|
category: Components
|
|
subtitle: 骨架屏
|
|
type: 反馈
|
|
title: Skeleton
|
|
cols: 1
|
|
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
|
---
|
|
|
|
在需要等待加载内容的位置提供一个占位图形组合。
|
|
|
|
## 何时使用
|
|
|
|
- 网络较慢，需要长时间等待加载处理的情况下。
|
|
- 图文信息内容较多的列表/卡片中。
|
|
- 只在第一次加载数据的时候使用。
|
|
- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
|
|
|
|
## API
|
|
|
|
### Skeleton
|
|
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
| --- | --- | --- | --- |
|
|
| active | 是否展示动画效果 | boolean | false |
|
|
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
|
|
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
|
|
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
|
|
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
|
|
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
|
|
|
|
### 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` | - |
|