#骨架
骨架屏在内容结构已知但数据尚未到达时保留布局，减少跳动并传达加载进度。
安装Terminal
npm install @a3s-lab/ui@0.4.1<div class="skeleton h-4 w-[150px]"></div>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用法
引入 CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者只导入基本CSS、组件组件CSS和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/skeleton.css";
@import "@a3s-lab/ui/styles/a3s.css";使用CDN或批量程序导入？请参见安装页。
添加骨架屏 HTML
添加具有大小调整工具类的 class="skeleton" 以创建加载占位符。
<div class="skeleton h-4 w-[150px]"></div>#示例
#头像
<div class="flex items-center gap-4">
<div class="skeleton size-10 shrink-0 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-[150px]"></div>
<div class="skeleton h-4 w-[100px]"></div>
</div>
</div>#卡
<div class="card w-full">
<header>
<div class="skeleton h-4 w-2/3"></div>
<div class="skeleton h-4 w-1/2"></div>
</header>
<section> <div class="skeleton aspect-video w-full"></div></section>
</div>#文本
<div class="flex flex-col gap-2">
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-3/4"></div>
</div>#表格
<div class="flex flex-col gap-7">
<div class="flex flex-col gap-3">
<div class="skeleton h-4 w-20"></div>
<div class="skeleton h-10 w-full"></div>
</div>
<div class="flex flex-col gap-3">
<div class="skeleton h-4 w-24"></div>
<div class="skeleton h-10 w-full"></div>
</div>
<div class="skeleton h-9 w-24"></div>
</div>#表
<div class="flex flex-col gap-2">
<div class="flex gap-4">
<div class="skeleton h-4 flex-1"></div>
<div class="skeleton h-4 w-24"></div>
<div class="skeleton h-4 w-20"></div>
</div>
<div class="flex gap-4">
<div class="skeleton h-4 flex-1"></div>
<div class="skeleton h-4 w-24"></div>
<div class="skeleton h-4 w-20"></div>
</div>
<div class="flex gap-4">
<div class="skeleton h-4 flex-1"></div>
<div class="skeleton h-4 w-24"></div>
<div class="skeleton h-4 w-20"></div>
</div>
</div>#RTL
骨架块是方向中立的。当间距取决于方向时，在它们周围使用逻辑布局工具类。
<div dir="rtl" class="flex items-center gap-4">
<div class="skeleton size-10 shrink-0 rounded-full"></div>
<div class="grid gap-2">
<div class="skeleton h-4 w-[150px]"></div>
<div class="skeleton h-4 w-[100px]"></div>
</div>
</div>