TPlaceholder / 骨架屏

Placeholder displays a skeleton screen while content is loading. Supports various sizes, column widths, avatar shapes, image aspect ratios, and animation styles. / 骨架屏在内容加载时展示占位效果，支持多种尺寸、列宽、头像形状、图片比例和动画风格。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
width	number (1-12)	—	Column width (col-*) / 列宽
size	'lg' | 'sm' | 'xs'	—	Size variant
color	TablerColor	—	Background color (bg-*)
avatar	boolean | 'xl' | 'lg' | 'sm' | 'xs'	false	Avatar placeholder
image	boolean | '1x1' | '4x3' | '16x9' | '21x9'	false	Image placeholder
animation	'glow' | 'wave'	—	Animation style

Slots / 插槽

Slot	Description / 说明
default	Custom placeholder content lines

Basic Usage / 基础用法

<script setup lang="ts">
import { TPlaceholder } from '@gulcc/tabler-vue'
</script>

<template>
  <TPlaceholder />
  <TPlaceholder animation="glow" />
  <TPlaceholder animation="wave" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TPlaceholder } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Column width / 列宽 -->
  <TPlaceholder :width="6" />
  <TPlaceholder :width="4" />

  <!-- Sizes / 尺寸 -->
  <TPlaceholder size="xs" />
  <TPlaceholder size="sm" />
  <TPlaceholder />

  <!-- With avatar / 带头像占位 -->
  <TPlaceholder avatar />

  <!-- Avatar size variants / 头像尺寸 -->
  <TPlaceholder avatar="xl" />
  <TPlaceholder avatar="sm" />

  <!-- With image / 带图片占位 -->
  <TPlaceholder image />
  <TPlaceholder image="16x9" />

  <!-- Custom content lines / 自定义行 -->
  <TPlaceholder>
    <TPlaceholder :width="8" />
    <TPlaceholder :width="6" />
    <TPlaceholder :width="10" />
  </TPlaceholder>
</template>

Tips / 避坑指南

• width is a 1-12 grid column value (maps to col-* classes), clamped to valid range
• avatar and image add decorative placeholder elements — they don't use src props
• Without animation, the placeholder has a static appearance; add "glow" or "wave" for animated loading effect
• Use nested TPlaceholder in the default slot to create multi-line skeleton layouts