Placeholder 骨架屏占位

骨架屏占位（Placeholder）用于内容尚未加载完成时提供视觉占位，降低用户等待焦虑。

基础用法

默认渲染为行内 <span> 元素，宽度自动。

<TPlaceholder width="7" />
<TPlaceholder width="4" />
<TPlaceholder width="10" />

宽度

通过 width 属性设置列宽（1–12），对应 Tabler 的 col-{n} 栅格系统。超出范围的值会自动钳制。

<TPlaceholder width="12" />
<TPlaceholder width="8" />
<TPlaceholder width="4" />
<TPlaceholder width="2" />

尺寸

通过 size 属性切换占位线高度：lg、默认、sm、xs。

<TPlaceholder width="8" size="lg" />
<TPlaceholder width="8" />
<TPlaceholder width="8" size="sm" />
<TPlaceholder width="8" size="xs" />

颜色

通过 color 属性设置背景色，支持所有 Tabler 预设色。

<TPlaceholder width="8" color="blue" />
<TPlaceholder width="8" color="red" />
<TPlaceholder width="8" color="green" />

头像占位

通过 avatar 属性渲染圆形头像占位，支持尺寸：xl、lg、默认、sm、xs。

<TPlaceholder avatar="xl" />
<TPlaceholder avatar="lg" />
<TPlaceholder avatar />
<TPlaceholder avatar="sm" />
<TPlaceholder avatar="xs" />

图片占位

通过 image 属性渲染图片占位容器，支持宽高比：1x1、4x3、16x9、21x9。

<div style="width: 120px">
  <TPlaceholder image="1x1" />
</div>
<div style="width: 160px">
  <TPlaceholder image="4x3" />
</div>
<div style="width: 160px">
  <TPlaceholder image="16x9" />
</div>
<div style="width: 160px">
  <TPlaceholder image="21x9" />
</div>

动画

通过 animation 属性启用动画效果，支持 glow（微光扫动）和 wave（波浪脉冲）两种模式。

<TPlaceholder width="12" animation="glow" />
<TPlaceholder width="12" animation="wave" />

卡片骨架屏

结合多个 Placeholder 模拟完整卡片布局。

查看代码

<div class="card">
  <div class="card-body">
    <div class="d-flex gap-3 align-items-center mb-3">
      <TPlaceholder avatar="lg" />
      <div class="flex-grow-1">
        <TPlaceholder width="6" />
        <TPlaceholder width="4" size="sm" />
      </div>
    </div>
    <TPlaceholder width="12" animation="glow" />
    <TPlaceholder width="12" animation="glow" />
    <TPlaceholder width="8" animation="glow" />
  </div>
</div>

API

属性 (Props)

属性名	说明	类型	默认值
width	列宽（1–12），自动钳制	number	undefined
size	占位线高度	'lg' | 'sm' | 'xs'	undefined
color	背景色（Tabler 预设色）	TablerColor	undefined
avatar	头像占位，接受布尔值或尺寸	boolean | 'xl' | 'lg' | 'sm' | 'xs'	false
image	图片占位，接受布尔值或宽高比	boolean | '1x1' | '4x3' | '16x9' | '21x9'	false
animation	动画效果	'glow' | 'wave'	undefined