Skeleton 骨架屏
以纯视觉占位保留待加载内容的布局形状，并对辅助技术隐藏。
使用概览
适合使用
- 页面首屏加载较慢且可以预估最终内容形状，并由外层报告加载状态时。
不建议使用
- 等待时间极短，或需要依靠骨架自身向辅助技术宣布加载状态时。
真实示例
标题骨架占位
骨架只维持单行空间，由外层状态区域报告加载进度。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/skeleton.json基础用法
导入
import { Skeleton } from "@richardqiu/quartz/skeleton";JSX
<div role="status" aria-live="polite"><span className="sr-only">正在加载标题</span><Skeleton className="h-5 w-48" /></div>状态与控制摘要
默认
加载中
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
className | string | 未设置 | 设置与最终内容匹配的占位尺寸；骨架固定对辅助技术隐藏。 |
组合结构
- 01
Skeleton
键盘约定
- Skeleton 是装饰内容，不进入键盘焦点顺序。
可访问性契约
- Skeleton 从可访问性树中隐藏；加载播报应放在所属区域。
- 系统减少动效或 Quartz none 模式下停止脉冲动画。