Skeleton
skeleton骨架屏 · shimmer 高光占位(text/circle/rect) + 无边框组合预设 CardSkeleton/ListSkeleton/TableSkeleton
用法
形状
shape 支持 text / circle / rect，尺寸用 className 控制。
tsx
<div className="flex items-center gap-4">
<Skeleton className="w-32" />
<Skeleton shape="circle" className="size-10" />
<Skeleton shape="rect" className="h-16 w-32" />
</div>头像 + 文本行
组合圆形与文本块，模拟用户信息加载占位。
tsx
<div className="flex items-center gap-3">
<Skeleton shape="circle" className="size-10" />
<div className="flex-1 space-y-2">
<Skeleton className="w-24" />
<Skeleton className="w-40" />
</div>
</div>列表预设
ListSkeleton 一行配置出多行列表占位。
tsx
<ListSkeleton rows={3} />卡片网格预设
CardSkeleton 输出卡片网格占位。
tsx
<CardSkeleton count={2} />何时用
数据加载中、需要给页面留出与真实内容同形的占位时用 Skeleton，列表/卡片/表格场景直接用对应预设少写排版。它表达「正在加载」——加载完成但确实没数据用 Empty；表格本体用 Table/ProTable，加载态再叠 TableSkeleton。
导入
ts
import { Skeleton, TableSkeleton, CardSkeleton, ListSkeleton } from "@hulianui/ui"Props
Skeleton 继承 div 原生属性（style 除外），并带 CVA 变体：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| shape | "text" | "circle" | "rect" | "text" | 占位形状 |
预设组件 ListSkeleton / CardSkeleton 用各自的计数 prop（rows / count）控制数量，尺寸靠外层 className 约束。
禁忌 / 坑
- 骨架本身是「无 chrome」的占位，预设（Card/List/Table）不自带边框/卡片容器；别再外层套一层 Card 造成双重边框。
- shimmer 是纯 CSS 动画，与图表/canvas 那类 rAF 动画不同，headless 截图能正常显形，无需特殊处理。
相关
Empty · Watermark · Table · Book3D · ProTable · PricingTable
Playground
<Skeleton shape="text" />