X-Next

Appearance

Skeleton 骨架屏 ​

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

何时使用 ​

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

基础用法 ​

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

加载完成 ​

vue
<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>

动画 ​

vue
<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>

图形骨架 ​

vue
<template>
  <x-skeleton>
    <x-space size="large" wrap>
      <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" />
    </x-space>
  </x-skeleton>
</template>

行数与宽度 ​

vue
<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>

按需导入 ​

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

Skeleton Props ​

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

Skeleton Slots ​

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

SkeletonLine Props ​

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

SkeletonShape Props ​

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

已知限制 ​

  • 当前保持 Arco 风格的 SkeletonLine / SkeletonShape 组合式 API，不提供 AntDV 风格的 avatar、title、paragraph 快捷 props。