骨架屏 Skeleton
通过设置 animation 属性,让骨架屏显示动画效果。
骨架屏组件提供 <sd-skeleton-line> 和 <sd-skeleton-shape> 两种组件,用户可根据需要组合使用。
图形骨架屏分为 square - 正方形(默认)、 circle - 圆形两种形状,并提供 small、medium、large 三种尺寸。
<skeleton> Props
Section titled “<skeleton> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| loading | 是否展示骨架屏(加载中状态) | boolean | true |
| animation | 是否开启骨架屏动画 | boolean | false |
<skeleton-line> Props
Section titled “<skeleton-line> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| rows | 展示的行数 | number | 1 |
| widths | 线型骨架的宽度 | Array<number | string> | [] |
| line-height | 线型骨架的行高 | number | 20 |
| line-spacing | 线型骨架的行间距 | number | 15 |
<skeleton-shape> Props
Section titled “<skeleton-shape> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| shape | 图形骨架的形状 | 'square' | 'circle' | 'square' |
| size | 图形骨架的大小 | 'small' | 'medium' | 'large' | 'medium' |