Importimport { Skeleton } from 'antd';
Docs
contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| active | Show animation effect | boolean | false | |
| classNames | Customize class for each semantic structure inside the Skeleton component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 |
| styles | Customize inline style for each semantic structure inside the Skeleton component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| active | Show animation effect | boolean | false | |
| avatar | Show avatar placeholder | boolean | SkeletonAvatarProps | false | |
| loading | Display the skeleton when true | boolean | - | |
| paragraph | Show paragraph placeholder | boolean | SkeletonParagraphProps | true | |
| round | Show paragraph and title radius when true | boolean | false | |
| title | Show title placeholder | boolean | SkeletonTitleProps | true |
| Property | Description | Type | Default |
|---|---|---|---|
| width | Set the width of title | number | string | - |
| 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> | - |
| Property | Description | Type | Default |
|---|---|---|---|
| active | Show animation effect, only valid when used avatar independently | boolean | false |
| shape | Set the shape of avatar | circle | square | circle |
| size | Set the size of avatar | number | large | small | default | default |
| 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 | - |
| Property | Description | Type | Default |
|---|---|---|---|
| active | Show animation effect | boolean | false |
| size | Set the size of input | large | small | default | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| blockRadius | Border radius of skeleton | number | 4 |
| gradientFromColor | Start color of gradient | string | rgba(0,0,0,0.06) |
| gradientToColor | End color of gradient | string | rgba(0,0,0,0.15) |
| paragraphLiHeight | Line height of paragraph skeleton | number | 16 |
| paragraphMarginTop | Margin top of paragraph skeleton | number | 28 |
| titleHeight | Height of title skeleton | string | number | 16 |
Simplest Skeleton usage.
Complex combination with avatar and multiple paragraphs.
Display active animation.
Skeleton Button, Avatar, Input, Image and Node.
Skeleton contains sub component.
Use skeleton in list component.
You can customize the semantic dom style of Skeleton by passing objects or functions through classNames and styles.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
