category | type | title | cols | cover |
---|---|---|---|---|
Components |
Feedback |
Skeleton |
1 |
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
- 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.
Property | Description | Type | Default |
---|---|---|---|
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 |
title | Show title placeholder | boolean | SkeletonTitleProps | true |
round | Show paragraph and title radius when true | boolean | false |
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 |
- |
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 | boolean | false |
size | Set the size of button | large | small | default |
- |
shape | Set the shape of button | circle | round | default |
- |
Property | Description | Type | Default |
---|---|---|---|
active | Show animation effect | boolean | false |
size | Set the size of input | large | small | default |
- |