开发预览更新于 2026-05-10

Skeleton 骨架屏

数据加载中的占位元素 —— 三种形状、shimmer 动画、多行文本辅助。

基础用法

最常见组合 — 圆形头像 + 两行文字行。width / height 接受像素数字或带单位字符串（'80%' '2rem'）。

<div style="display: flex; gap: 12px; align-items: center;">
<CfSkeleton shape="circle" :width="40" :height="40" />
<div style="flex: 1;">
  <CfSkeleton shape="text" :width="120" />
  <CfSkeleton shape="text" :width="200" />
</div>
</div>

<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<CfSkeleton shape="circle" width={40} height={40} />
<div style={{ flex: 1 }}>
  <CfSkeleton shape="text" width={120} />
  <CfSkeleton shape="text" width={200} />
</div>
</div>

三种形状

shape —— text（一根细线，默认 1em 高）/ circle（圆形，给头像 / 图标用）/ rect（矩形块，给图片 / 卡片用）。

shape = text（一根细线）

shape = circle（圆形头像 / 图标占位）

shape = rect（矩形块 / 图片占位）

<CfSkeleton shape="text" :width="240" />
<CfSkeleton shape="circle" :width="48" :height="48" />
<CfSkeleton shape="rect" :height="80" />

<CfSkeleton shape="text" width={240} />
<CfSkeleton shape="circle" width={48} height={48} />
<CfSkeleton shape="rect" height={80} />

多行文本

lines > 1 时 shape="text" 自动渲染多行，最后一行宽度收缩到 60% 模拟段尾。

<CfSkeleton shape="text" :lines="4" />

<CfSkeleton shape="text" lines={4} />

关闭动画

static 关掉 shimmer 动画，仅渲染纯色块 — 在低端设备 / prefers-reduced-motion 场景下更省 CPU。

shimmer 动画（默认）

static —— 关闭动画，纯色块

<CfSkeleton shape="rect" :height="40" />
<CfSkeleton shape="rect" :height="40" static />

<CfSkeleton shape="rect" height={40} />
<CfSkeleton shape="rect" height={40} static />

卡片占位

把多种 shape 组合起来模拟一张卡片的真实结构 —— 头图 + 头像 + 标题 + 副标题 + 多行正文。

<div class="card">
<CfSkeleton shape="rect" :height="120" />
<div class="row">
  <CfSkeleton shape="circle" :width="32" :height="32" />
  <div>
    <CfSkeleton shape="text" :width="100" />
    <CfSkeleton shape="text" :width="160" />
  </div>
</div>
<CfSkeleton shape="text" :lines="3" />
</div>

<div className="card">
<CfSkeleton shape="rect" height={120} />
<div className="row">
  <CfSkeleton shape="circle" width={32} height={32} />
  <div>
    <CfSkeleton shape="text" width={100} />
    <CfSkeleton shape="text" width={160} />
  </div>
</div>
<CfSkeleton shape="text" lines={3} />
</div>

API

Prop	类型	默认值	说明
`shape`	`'text' \| 'circle' \| 'rect'`	`'rect'`	基础形态
`width`	`string \| number`	—	宽度，数字按 px、字符串原样写入 CSS
`height`	`string \| number`	—	高度，同上
`lines`	`number`	`1`	shape=text 时的行数，最后一行 60% 宽
`static`	`boolean`	`false`	关闭 shimmer 动画，仅渲染纯色块（首次绘制更省 CPU）