Skeleton 骨架屏
Skeleton 在内容加载时按内容的形状占位。它只是装饰,对辅助技术隐藏(aria-hidden),所以请在它占位的区域上设置 aria-busy。开启 prefers-reduced-motion 时不播放动画。
演示
基础用法
text 生成一行行内文字占位,高 1em,落在文字基线上;repeat 渲染多个。
形状
圆角跟随主题;sharp 变成直角,round 两端全圆,circle 的宽高都依次取 width、height。
尺寸
size 取同尺寸 Button 或 Input 的高度,占位和它代替的控件一样大。
重复
加载中的卡片
用圆形和文字行拼出一张卡片的形状。
加载内容
内容到了就把骨架换成内容。加载期间区域带上 aria-busy。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
text | boolean | false | 一行行内文字。 | 未发布 |
round | boolean | false | 两端全圆。 | 未发布 |
circle | boolean | false | 圆形。 | 未发布 |
sharp | boolean | false | 直角,不用主题的圆角。 | 未发布 |
width | number | string | undefined | 宽度;数字单位为 px。默认占满宽度。 | 未发布 |
height | number | string | undefined | 高度;数字单位为 px。默认取 size 的高度,否则 1em。 | 未发布 |
size | small | medium | large | undefined | 取同尺寸控件的高度。 | 未发布 |
repeat | number | 1 | 渲染几个。每个都带上同样的 props,ref 给第一个。 | 未发布 |
animated | boolean | true | 是否播放加载动画。 | 未发布 |
默认圆角跟随主题,设置 sharp 才变成直角。