跳到正文

Skeleton 骨架屏

Skeleton 在内容加载时按内容的形状占位。它只是装饰,对辅助技术隐藏(aria-hidden),所以请在它占位的区域上设置 aria-busy。开启 prefers-reduced-motion 时不播放动画。

演示

基础用法

text 生成一行行内文字占位,高 1em,落在文字基线上;repeat 渲染多个。

形状

圆角跟随主题;sharp 变成直角,round 两端全圆,circle 的宽高都依次取 width、height。

尺寸

size 取同尺寸 Button 或 Input 的高度,占位和它代替的控件一样大。

重复

加载中的卡片

用圆形和文字行拼出一张卡片的形状。

加载内容

内容到了就把骨架换成内容。加载期间区域带上 aria-busy。

Props

名称类型默认值说明版本
textbooleanfalse一行行内文字。未发布
roundbooleanfalse两端全圆。未发布
circlebooleanfalse圆形。未发布
sharpbooleanfalse直角,不用主题的圆角。未发布
widthnumber | stringundefined宽度;数字单位为 px。默认占满宽度。未发布
heightnumber | stringundefined高度;数字单位为 px。默认取 size 的高度,否则 1em。未发布
sizesmall | medium | largeundefined取同尺寸控件的高度。未发布
repeatnumber1渲染几个。每个都带上同样的 props,ref 给第一个。未发布
animatedbooleantrue是否播放加载动画。未发布

默认圆角跟随主题,设置 sharp 才变成直角。