BreezeUI
  • 简体中文

    • Skeleton 骨架屏

    基于 BrConfigProvider 提供的设计 tokens，支持多形状、多动画、完美主题适配的企业级骨架屏组件，用于页面、列表、表单的加载占位。

    组件特性

    • 📦 多种形状：支持矩形、圆形、文字、头像和卡片骨架。
    • ⚡ 动画：支持 pulse、wave 和无动画模式。
    • 🏗️ 组件骨架：专为文字、卡片和头像设计的骨架组件。
    • 📚 Z-Index 管理器：内置骨架覆盖层的 z-index 管理。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    通过 Skeleton 组件可以创建基础的矩形占位符。

    <template>
  <div class="flex flex-col gap-4">
    <Skeleton class="h-12 w-12 rounded-full" />
    <div class="space-y-2">
      <Skeleton class="h-4 w-[250px]" />
      <Skeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>

<script setup>
import { Skeleton } from '@breeze-ui/vue'
</script>

    文本多行骨架

    使用 SkeletonText 可以快速创建多行文本骨架，支持自定义行数、末行宽度和间距。

    <template>
  <SkeletonText :lines="4" last-line-width="40%" gap="16px" />
</template>

<script setup>
import { SkeletonText } from '@breeze-ui/vue'
</script>

    卡片组合骨架

    使用 SkeletonCard 可以快速创建包含头像、标题、正文的卡片占位。

    <template>
  <SkeletonCard :avatar="true" :title="true" :action="true" :lines="3" />
</template>

<script setup>
import { SkeletonCard } from '@breeze-ui/vue'
</script>

    头像与文本组合

    组合 SkeletonCircle 和 SkeletonText 使用。

    <template>
  <div class="flex items-center space-x-4">
    <SkeletonCircle size="48px" />
    <div class="flex-1">
      <SkeletonText :lines="2" />
    </div>
  </div>
</template>

<script setup>
import { SkeletonCircle, SkeletonText } from '@breeze-ui/vue'
</script>

    动画配置

    支持 pulse（默认脉冲）和 wave（波浪）两种动画，或者关闭动画 none。

    <template>
  <div class="space-y-8 w-full max-w-md">
    <div class="space-y-2">
      <div class="text-sm text-muted-foreground">Pulse (Default)</div>
      <SkeletonText animation="pulse" :lines="2" />
    </div>
    <div class="space-y-2">
      <div class="text-sm text-muted-foreground">Wave</div>
      <SkeletonText animation="wave" :lines="2" />
    </div>
    <div class="space-y-2">
      <div class="text-sm text-muted-foreground">None</div>
      <SkeletonText animation="none" :lines="2" />
    </div>
  </div>
</template>

<script setup>
import { SkeletonText } from '@breeze-ui/vue'
</script>

    与列表集成

    与 table 列表集成的示例。

    <template>
  <div class="w-full">
    <table class="w-full">
      <thead>
        <tr class="border-b bg-muted/50 text-left">
          <th class="p-4 font-medium text-sm text-muted-foreground">Name</th>
          <th class="p-4 font-medium text-sm text-muted-foreground">Status</th>
          <th class="p-4 font-medium text-sm text-muted-foreground">Role</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in 3" :key="i" class="border-b">
          <td class="p-4">
            <div class="flex items-center space-x-3">
              <SkeletonCircle size="32px" />
              <Skeleton class="h-4 w-24" />
            </div>
          </td>
          <td class="p-4"><Skeleton class="h-6 w-16 rounded-full" /></td>
          <td class="p-4"><Skeleton class="h-4 w-20" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { Skeleton, SkeletonCircle } from '@breeze-ui/vue'
</script>

    与表单集成

    与表单项集成的典型应用场景。

    <template>
  <div class="space-y-6 w-full max-w-md">
    <div class="space-y-2">
      <Skeleton class="h-4 w-16" />
      <SkeletonInput size="md" class="w-full" />
    </div>
    <div class="space-y-2">
      <Skeleton class="h-4 w-16" />
      <SkeletonInput size="md" class="w-full" />
    </div>
    <SkeletonButton size="md" class="w-full" />
  </div>
</template>

<script setup>
import { Skeleton, SkeletonInput, SkeletonButton } from '@breeze-ui/vue'
</script>

    主题定制

    组件完全兼容 BrConfigProvider 注入的 CSS 变量，可以直接修改 :root 和 .dark 下的 --muted 等变量实现颜色调整，圆角则继承 --radius 变量。

    API 说明

    Skeleton

    属性类型默认值说明
    animation'pulse' | 'wave' | 'none''pulse'动画类型
    shape'rect' | 'circle' | 'text' | 'card' | 'button' | 'input''rect'骨架形状
    loadingbooleantrue是否显示骨架屏，为 false 时显示插槽内容
    widthstring | number-宽度
    heightstring | number-高度
    roundedboolean | stringtrue是否带圆角，或传入具体的圆角类名

    SkeletonText

    属性类型默认值说明
    linesnumber1显示行数
    lastLineWidthstring | number'60%'最后一行宽度
    gapstring | number'12px'行间距
    继承Skeleton 其他属性--

    SkeletonCircle

    属性类型默认值说明
    sizestring | number'40px'直径大小
    继承Skeleton 其他属性--

    SkeletonCard

    属性类型默认值说明
    avatarbooleantrue是否显示头像
    titlebooleantrue是否显示标题
    actionbooleanfalse是否显示操作按钮
    linesnumber3内容行数
    继承Skeleton 其他属性--

    SkeletonButton / SkeletonInput

    属性类型默认值说明
    sizestring'md'尺寸，匹配对应组件的大小规范
    继承Skeleton 其他属性--

    SkeletonManager

    提供多实例层级管理，通过 skeletonManager.nextZIndex() 自动递增返回 z-index。