Skeleton 骨架
内容还没到的时候先把它的轮廓画出来,等真内容来了原地替换,页面不跳。加载通常超过一秒、而且知道内容大概长什么样时用;否则用 Spinner。
三种形状
text 是一条文字(默认高 12),circle 是头像,rect 是图片或卡片块。width / height 接受数字(px)或 CSS 长度。
多行文字
lines 渲染几行,最后一行自动短一些(70%)。
拼成内容的样子
用几块骨架拼出真实内容的布局,并在外层容器上标 aria-busy。
规格
- 高光
- 扫过 · 1.6s 线性循环
- 圆角
- 文字 8 · 方块 12 · 圆形全圆
- 减弱动效
- 高光停下,只留静态底色
接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | 'text' | 形状。 |
width | number | string | — | 宽度。text / rect 默认撑满;circle 默认 40。 |
height | number | string | — | 高度。text 默认 12,rect 默认 96;circle 默认等于宽度。 |
lines | number | 1 | text 时渲染几行,最后一行短一些。 |
无障碍
- 骨架是纯装饰,自带
aria-hidden,读屏完全读不到。 - 所以“正在加载”要另外告诉读屏:在外层容器上标
aria-busy="true",必要时再加一段只给读屏的“加载中”文字(或一个 Spinner)。 - 内容到了之后去掉 aria-busy。骨架不可聚焦,没有键盘操作。
- 减弱动效时高光不再扫过。