mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +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
67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
---
|
|
category: Components
|
|
type: Feedback
|
|
title: Skeleton
|
|
cols: 1
|
|
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
|
---
|
|
|
|
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
|
|
|
|
## When To Use
|
|
|
|
- When a resource needs long time to load.
|
|
- When the component contains lots of information, such as List or Card.
|
|
- Only works when loading data for the first time.
|
|
- Could be replaced by Spin in any situation, but can provide a better user experience.
|
|
|
|
## API
|
|
|
|
### Skeleton
|
|
|
|
| Property | Description | Type | Default |
|
|
| --- | --- | --- | --- |
|
|
| active | Show animation effect | boolean | false |
|
|
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
|
|
| loading | Display the skeleton when true | boolean | - |
|
|
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
|
|
| round | Show paragraph and title radius when true | boolean | false |
|
|
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
|
|
|
|
### SkeletonAvatarProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| --- | --- | --- | --- |
|
|
| active | Show animation effect, only valid when used avatar independently | boolean | false |
|
|
| shape | Set the shape of avatar | `circle` \| `square` | - |
|
|
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
|
|
|
|
### SkeletonTitleProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| -------- | ---------------------- | ---------------- | ------- |
|
|
| width | Set the width of title | number \| string | - |
|
|
|
|
### SkeletonParagraphProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| --- | --- | --- | --- |
|
|
| rows | Set the row count of paragraph | number | - |
|
|
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
|
|
|
|
### SkeletonButtonProps
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
| --- | --- | --- | --- | --- |
|
|
| active | Show animation effect | boolean | false | |
|
|
| block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
|
|
| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - | |
|
|
| size | Set the size of button | `large` \| `small` \| `default` | - | |
|
|
|
|
### SkeletonInputProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| -------- | --------------------- | ------------------------------- | ------- |
|
|
| active | Show animation effect | boolean | false |
|
|
| size | Set the size of input | `large` \| `small` \| `default` | - |
|