Skip to content

skeleton 骨架屏

将加载中的数据用灰色占位。

基础用法

骨架屏组件提供 <tu-skeleton-line> 和 <tu-skeleton-shape> 两种组件,用户可根据需要组合使用。

图形骨架屏

图形骨架屏分为 square - 正方形(默认)、 circle - 圆形两种形状,并提供 mini、small、medium、large 四种尺寸。

动画

通过设置 animation 属性,让骨架屏显示动画效果

Skeleton API

skeleton Props

参数名描述类型默认值
loading是否展示骨架屏(加载中状态)Booleantrue
animation是否开启骨架屏动画Booleanfalse

skeleton-line Props

参数名描述类型默认值
rows展示的行数Number1
widths线型骨架的宽度Array[]
line-height线型骨架的行高Number20
line-spacing线型骨架的行间距Number15

skeleton-shape Props

参数名描述类型默认值
shape图形骨架的形状Stringsquare
size图形骨架的大小Stringmedium