Skeleton 骨架屏

用于数据加载前占位，降低页面空白感。

何时使用

• 页面局部内容正在加载，需要保留版式位置。
• 图文列表、详情卡片或表单区域预计很快返回真实内容。
• 首屏加载需要比 Spin 更接近最终结构的反馈。

基础用法

<template>
  <x-skeleton>
    <x-space size="large">
      <x-skeleton-shape />
      <x-skeleton-line :rows="3" :widths="['56%', '100%', '72%']" />
    </x-space>
  </x-skeleton>
</template>

加载完成

<template>
  <x-button @click="loading = !loading">切换加载状态</x-button>
  <x-skeleton :loading="loading" animation>
    <x-skeleton-line :rows="3" />
    <template #content>
      <div>真实内容</div>
    </template>
  </x-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);
</script>

动画

<template>
  <x-switch v-model="animation" checked-text="动画" unchecked-text="静态" />
  <x-skeleton :animation="animation">
    <x-skeleton-line :rows="4" />
  </x-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const animation = ref(true);
</script>

图形骨架

<template>
  <x-skeleton>
    <div class="demo-inline-group">
      <x-skeleton-shape size="small" />
      <x-skeleton-shape />
      <x-skeleton-shape size="large" />
      <x-skeleton-shape shape="circle" size="small" />
      <x-skeleton-shape shape="circle" />
      <x-skeleton-shape shape="circle" size="large" />
    </div>
  </x-skeleton>
</template>

行数与宽度

<template>
  <x-skeleton animation>
    <x-skeleton-line
      :rows="rows"
      :widths="widths"
      :line-height="20"
      :line-spacing="15"
    />
  </x-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const rows = ref(3);
const widths = ref(['72%', '100%', 180]);
</script>

按需导入

import { Skeleton, SkeletonLine, SkeletonShape } from 'x-next';

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

import 'x-next/style/base.css';
import 'x-next/style/skeleton.css';

Skeleton Props

参数	说明	类型	默认值
loading	是否展示骨架屏	boolean	true
animation	是否开启动画	boolean	false

Skeleton Slots

插槽名	说明
default	加载中展示的骨架内容
content	加载完成后展示的真实内容

SkeletonLine Props

参数	说明	类型	默认值
rows	行数	number	1
widths	每一行宽度	Array<number | string>	[]
lineHeight	行高	number	20
lineSpacing	行间距	number	15

SkeletonShape Props

参数	说明	类型	默认值
shape	图形形状	'square' | 'circle'	'square'
size	图形尺寸	'small' | 'medium' | 'large'	'medium'

无障碍

• loading 时根节点带 aria-busy="true"，屏幕阅读器据此知道该区域正在加载。
• SkeletonLine 与 SkeletonShape 是纯装饰占位，内部带 aria-hidden="true"，避免空列表项被读出来。
• 开启系统「减弱动态效果」后，animation 的流光动画自动停止；占位轮廓与渐变保持不变，加载区域不会消失。

已知限制

• 当前保持 Arco 风格的 SkeletonLine / SkeletonShape 组合式 API，不提供 AntDV 风格的 avatar、title、paragraph 快捷 props。
• 只有「流光」一种动画形态，没有 AntDV 的 fade 变体。