skeleton
Use gray to place the data being loaded.
Basic usage
The skeleton screen component provides two components: <tu-skeleton-line> and <tu-skeleton-shape>, users can combine them according to their needs.
Shape Skeleton
The graphic skeleton screen is divided into two shapes: square, circle, and provides three sizes of small, medium, and large.
Animation
By setting the animation property, the skeleton screen can display the animation effect.
Skeleton API
skeleton Props
| Name | Description | Type | Default |
|---|---|---|---|
| loading | Whether to display the skeleton screen (loading state) | Boolean | true |
| animation | Whether to enable skeleton screen animation | Boolean | false |
skeleton-line Props
| Name | Description | Type | Default |
|---|---|---|---|
| rows | Number of rows displayed | Number | 1 |
| widths | The width of the line skeleton | Array | [] |
| line-height | Line height of the line skeleton | Number | 20 |
| line-spacing | Line spacing of line skeleton | Number | 15 |
skeleton-shape Props
| Name | Description | Type | Default |
|---|---|---|---|
| shape | The shape of the shape skeleton | String | square |
| size | The size of the shape skeleton | String | medium |