Importimport { Skeleton } from "antd"; |
Docs |
contributors
| 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 |
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.