Skip to content

Skeleton 骨架屏

当页面数据未被加载完成时显示, 并不会过分区分骨架屏内部Item的类别,所有骨架屏Item都应该是一个普通的矩形盒子, 通过css样式来改变外观和布局

基础用法

skeletonItem的默认样式是一个高20px、宽100%的矩形长条

通过round 设置圆角

通过circle设置圆形

TIP

设置为圆形时, 不应该设置元素的高度, 默认高度始终和宽度相等

扫描线效果

通过 animated设置骨架屏的扫描线动画

加载状态

通过loading设置骨架屏是否还处于加载中状态, 当loading为false时应该显示真实UI

TIP

有时候页面渲染太快会导致骨架屏闪动一下便消失, 通过throttle属性设置加载完毕后切换的延时.

Skeleton API

Skeleton Props

属性名说明可选值默认值
animated是否采用扫描线动画Booleanfalse
loading是否处于加载中Booleantrue
throttle切换到真实UI时的延时Number50ms

Skeleton Slots

名称说明
skeleton骨架屏元素
default真实元素

SkeletonItem API

SkeletonItem Props

属性名说明可选值默认值
variant元素的类型'triangle' | 'rectangle' | 'image'rectangle
circle是否是圆形Booleanfalse
round是否是圆角Booleanfalse

源代码

组件

贡献者

Released under the MIT License.