Skeleton 骨架屏
新粗野主义风格的骨架屏加载组件，提供子组件用于常见加载模式。
预览
Preview
变体
头像尺寸
sm
default
lg
xl
骨架文本
骨架卡片
加载中...
骨架表格
基础尺寸
形状
自定义宽度
加载质感效果（effect）
安装
pnpm dlx brutx-vue@latest add skeleton用法
基础骨架屏
vue
<script setup>
import { Skeleton } from 'brutx-ui-vue'
</script>
<template>
<Skeleton class="h-12 w-12" />
</template>形状
| 形状 | 说明 |
|---|---|
rect | 圆角矩形（rounded-brutal） |
circle | 圆形（rounded-full），宽高相等 |
vue
<template>
<div class="flex items-center gap-4">
<Skeleton shape="rect" size="lg" width="80px" />
<Skeleton shape="circle" size="lg" />
</div>
</template>自定义宽度
width 接受任意 CSS 宽度字符串，包括百分比；当 shape="circle" 时同时设置高度。
vue
<template>
<div class="space-y-2 w-full">
<Skeleton width="100%" />
<Skeleton width="75%" />
<Skeleton width="50%" />
</div>
</template>SkeletonText
vue
<script setup>
import { SkeletonText } from 'brutx-ui-vue'
</script>
<template>
<SkeletonText :lines="3" />
</template>SkeletonAvatar
vue
<script setup>
import { SkeletonAvatar } from 'brutx-ui-vue'
</script>
<template>
<SkeletonAvatar size="default" />
</template>SkeletonCard
vue
<script setup>
import { SkeletonCard } from 'brutx-ui-vue'
</script>
<template>
<SkeletonCard />
</template>SkeletonTable
vue
<script setup>
import { SkeletonTable } from 'brutx-ui-vue'
</script>
<template>
<SkeletonTable :rows="5" :columns="4" />
</template>变体
| 变体 | 说明 |
|---|---|
default | 灰色背景 |
primary | 主色，30% 不透明度 |
secondary | 辅助色，30% 不透明度 |
accent | 强调色，30% 不透明度 |
尺寸
| 尺寸 | 高度 |
|---|---|
sm | h-8 |
default | h-10 |
lg | h-14 |
xl | h-20 |
当 shape="circle" 时，宽度与高度保持一致（w-8/w-10/w-14/w-20）。
vue
<template>
<div class="space-y-2">
<Skeleton size="sm" width="200px" />
<Skeleton size="default" width="200px" />
<Skeleton size="lg" width="200px" />
<Skeleton size="xl" width="200px" />
</div>
</template>加载质感效果
effect 为骨架块叠加 CRT 质感动效：
| 效果 | 说明 |
|---|---|
none | 默认脉冲呼吸 |
scanlines | 叠加 CRT 扫描线纹理 |
ascii | 内部渲染 ASCII 终端块闪烁（可通过默认插槽自定义内容） |
vue
<template>
<div class="space-y-2">
<Skeleton effect="scanlines" width="240px" />
<Skeleton effect="ascii" size="xl" width="240px" />
</div>
</template>子组件
| 组件 | 说明 |
|---|---|
Skeleton | 基础骨架块，内置 role="status" 和 aria-busy="true" 无障碍属性 |
SkeletonText | 多行骨架文本，支持自定义行数和末行宽度 |
SkeletonAvatar | 圆形头像占位符 |
SkeletonCard | 完整卡片骨架，包含图片区、标题、文本和按钮占位 |
SkeletonTable | 表格骨架，内置 role="table" 和 aria-busy="true" 无障碍属性 |
API 参考
Skeleton
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | 设置骨架占位块使用的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | 设置骨架块高度；shape 为 circle 时也决定圆形的直径。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
shape | "circle" | "rect" | undefined | "rect" | 选择矩形或圆形占位外观；圆形会保持宽高相等。 |
详情声明类型NonNullable<"rect" | "circle" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
effect | "ascii" | "none" | "scanlines" | undefined | "none" | 选择占位动效质感：none 使用默认脉冲，scanlines 添加 CRT 扫描线，ascii 渲染闪烁终端块。 |
详情声明类型NonNullable<"none" | "scanlines" | "ascii" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
width | string | number | undefined | undefined | 覆盖骨架块宽度；数字按像素转换，字符串作为 CSS 宽度使用。圆形模式下此值同时设置高度。 |
详情声明类型string | number | undefined 默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
class | string | undefined | undefined | 追加到骨架块状态容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/Skeleton.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 可选的占位块内容；使用 ascii 效果且未提供插槽时，组件会渲染默认终端块字符。 |
详情声明类型{}来源packages/ui/src/components/skeleton/Skeleton.vue | ||
SkeletonAvatar
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | 设置圆形头像占位块的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | 设置头像占位圆形的直径。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
class | string | undefined | undefined | 追加到头像骨架圆形元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
SkeletonCard
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | 设置卡片内骨架占位块的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/SkeletonCard.vue | |||
label | string | undefined | undefined | 设置卡片状态区域的无障碍名称；空字符串会回退到当前语言的加载文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonCard.vue | |||
class | string | undefined | undefined | 追加到卡片骨架外层容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonCard.vue | |||
SkeletonTable
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | 设置表格占位单元格的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/SkeletonTable.vue | |||
rows | number | undefined | 5 | 设置占位数据行数；默认 5，非有限值回退到默认值，结果限制在 0 到 100 行。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonTable.vue | |||
columns | number | undefined | 4 | 设置占位列数；默认 4，非有限值回退到默认值，结果限制在 0 到 20 列。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonTable.vue | |||
class | string | undefined | undefined | 追加到骨架表格容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonTable.vue | |||
SkeletonText
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | 设置文本行骨架的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/skeleton/SkeletonText.vue | |||
lines | number | undefined | 3 | 设置占位文本行数，默认 3 行，结果截断并限制在 0 到 100 行。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonText.vue | |||
lastLineWidth | string | undefined | "60%" | 设置最后一行的 CSS 宽度，默认 60%；其余行占满可用宽度。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonText.vue | |||
class | string | undefined | undefined | 追加到多行骨架文本容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/skeleton/SkeletonText.vue | |||
可访问性
- ARIA 属性：
Skeleton内置role="status"和aria-busy="true"；SkeletonTable内置role="table"和aria-busy="true"