骨架屏 skeleton

数据展示组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

容器竖着码放骨架条，形状缺省是一行文字

<script setup lang="ts">
import { XhSkeletonBone, XhSkeletonRoot } from "@xihan-ui/vue";
</script>

<template>
  <XhSkeletonRoot style="inline-size: 260px">
    <XhSkeletonBone />
    <XhSkeletonBone />
    <XhSkeletonBone />
  </XhSkeletonRoot>
</template>

形状

容器的 variant 是这一组的默认形状，单根骨架条自带 variant 就按自己的来

<script setup lang="ts">
import { XhSkeletonBone, XhSkeletonRoot } from "@xihan-ui/vue";
</script>

<template>
  <!-- 头像位与两行文字并排：容器默认 text，头像那一根单独声明 circle -->
  <XhSkeletonRoot
    style="inline-size: 260px; flex-direction: row; align-items: center"
  >
    <XhSkeletonBone variant="circle" />
    <XhSkeletonBone />
  </XhSkeletonRoot>

  <!-- 整组都是块：容器给了 rect，里面不必逐根再写 -->
  <XhSkeletonRoot variant="rect" style="inline-size: 200px">
    <XhSkeletonBone />
  </XhSkeletonRoot>
</template>

加载结束

loading 期间容器报 aria-busy，翻成 false 后整块收起，位置让给真内容

<script setup lang="ts">
import { ref } from "vue";
import { XhSkeletonBone, XhSkeletonRoot } from "@xihan-ui/vue";

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

<template>
  <div style="inline-size: 100%; display: grid; gap: 12px; justify-items: start">
    <button type="button" @click="loading = !loading">
      {{ loading ? "数据回来了" : "重新加载" }}
    </button>

    <XhSkeletonRoot :loading="loading" style="inline-size: 260px">
      <XhSkeletonBone />
      <XhSkeletonBone />
    </XhSkeletonRoot>

    <p v-if="!loading" style="margin: 0">这两行是接口回来之后的真内容。</p>
  </div>
</template>

按版面占位

骨架条的宽高由内联样式与组件令牌定，占位形状贴着真内容将来的样子

<script setup lang="ts">
import { XhSkeletonBone, XhSkeletonRoot } from "@xihan-ui/vue";
</script>

<template>
  <!-- 卡片位：一块封面加两行正文，末行收窄，看起来像一段还没排出来的字 -->
  <XhSkeletonRoot style="inline-size: 240px">
    <XhSkeletonBone
      variant="rect"
      style="--xh-skeleton-rect-block-size: 120px"
    />
    <XhSkeletonBone />
    <XhSkeletonBone style="inline-size: 60%" />
  </XhSkeletonRoot>

  <!-- 控件位：圆点直径与两个按钮的宽高各自定死，加载结束后位置不会跳 -->
  <XhSkeletonRoot
    style="inline-size: 240px; flex-direction: row; align-items: center"
  >
    <XhSkeletonBone
      variant="circle"
      style="--xh-skeleton-circle-size: 28px"
    />
    <XhSkeletonBone
      variant="rect"
      style="inline-size: 96px; --xh-skeleton-rect-block-size: 32px"
    />
    <XhSkeletonBone
      variant="rect"
      style="inline-size: 64px; --xh-skeleton-rect-block-size: 32px"
    />
  </XhSkeletonRoot>
</template>

产物

层	值
自定义元素	<xh-skeleton>
Vue 组件	XhSkeletonBone XhSkeletonRoot
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/skeleton.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="skeleton"：root · bone

Props

属性	类型	必填	说明
loading	boolean		是否还在加载，默认 true。
variant	SkeletonVariant		容器内骨架条的默认形状，默认 'text'。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
loading	boolean	当前是否处于加载态。
getRootProps	() => T['element']
getBoneProps	(bone?: SkeletonBoneProps) => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。