mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 00:08:27 +08:00
66 lines
2.7 KiB
Markdown
66 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 |
|
|
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
|
|
| round | Show paragraph and title radius when `true` | boolean | false |
|
|
|
|
### SkeletonAvatarProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| --- | --- | --- | --- |
|
|
| active | Show animation effect, only valid when used avatar independently. | boolean | false |
|
|
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
|
|
| shape | Set the shape of avatar | `circle` \| `square` | - |
|
|
|
|
### 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 |
|
|
| -------- | ----------------------- | -------------------------------- | ------- |
|
|
| active | Show animation effect | boolean | false |
|
|
| size | Set the size of button | `large` \| `small` \| `default` | - |
|
|
| shape | Set the shape of button | `circle` \| `round` \| `default` | - |
|
|
|
|
### SkeletonInputProps
|
|
|
|
| Property | Description | Type | Default |
|
|
| -------- | --------------------- | ------------------------------- | ------- |
|
|
| active | Show animation effect | boolean | false |
|
|
| size | Set the size of input | `large` \| `small` \| `default` | - |
|