使用方法

Skeleton 在内容尚未加载完成时渲染占位块，按最终内容的尺寸与形状撑起布局，减轻加载完成时的跳动。它适合内容尺寸已知的场景；尺寸未知时建议改用 Spinner。

在应用入口引入主题：

import '@astryx-vue/themes/neutral.css'

组件从独立入口导入，结构样式会随组件自动加载：

<script setup lang="ts">
import { Skeleton } from '@astryx-vue/core/Skeleton'
</script>

<template>
  <div aria-busy="true" aria-label="正在加载内容" role="status">
    <Skeleton :height="20" :width="200" />
  </div>
</template>

最佳实践

指引	实践
推荐	让占位块的尺寸和形状贴近最终内容，加载完成后布局才不会发生明显跳动。
推荐	为同一区域内的多个骨架屏依次设置 index，脉冲动画会按顺序错开，形成自然的波浪效果。
避免	在内容尺寸未知时使用骨架屏，占位块无法模拟未知布局，这种情况改用 Spinner 更合适。
避免	在同一内容区域混用 Spinner 和骨架屏，两种加载模式并存会让界面显得不一致，只选其中一种即可。
避免	让骨架屏长时间停留，加载明显偏慢时应改显错误或空状态，让用户知道当前发生了什么。

示例

按最终内容的尺寸与结构组合占位形状，让加载前后的布局保持一致。

内容占位

参照最终内容的布局组合占位块，尺寸与形状一一对应，并用 index 依次错开脉冲动画，减少加载完成时的跳动。