Skeleton 加载占位

用于加载占位场景的 MoriUI 组件。

导入

import { Skeleton } from 'moriui'

示例

概览

头像与文字占位组合。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="flex items-center gap-3">
    <Skeleton class="size-10 rounded-full" /><div class="grid gap-2">
      <Skeleton class="h-4 w-40" /><Skeleton class="h-3 w-28" />
    </div>
  </div>
</template>

头像

模拟成员条目加载。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="flex items-center gap-3">
    <Skeleton class="size-10 rounded-full" /><div class="grid gap-2">
      <Skeleton class="h-4 w-32" /><Skeleton class="h-3 w-24" />
    </div>
  </div>
</template>

卡片

模拟媒体卡片加载。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="w-full max-w-sm space-y-3 rounded-xl border p-4">
    <Skeleton class="h-32 w-full rounded-lg" /><Skeleton class="h-4 w-3/4" /><Skeleton class="h-4 w-1/2" />
  </div>
</template>

文本

模拟多行文字加载。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="w-full max-w-md space-y-2">
    <Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-11/12" /><Skeleton class="h-4 w-2/3" />
  </div>
</template>

表单

模拟标签、输入与按钮。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="w-full max-w-sm space-y-4">
    <div class="space-y-2">
      <Skeleton class="h-4 w-20" /><Skeleton class="h-9 w-full" />
    </div><Skeleton class="h-9 w-24" />
  </div>
</template>

表格

模拟表头与多行数据。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div class="w-full max-w-md space-y-2">
    <Skeleton class="h-8 w-full" /><Skeleton class="h-10 w-full" /><Skeleton class="h-10 w-full" /><Skeleton class="h-10 w-full" />
  </div>
</template>

RTL

占位形状按 RTL 内容布局排列。

<script setup lang="ts">
  import { Skeleton } from 'moriui'
</script>

<template>
  <div dir="rtl" class="flex items-center gap-3">
    <Skeleton class="size-10 rounded-full" /><div class="grid gap-2">
      <Skeleton class="h-4 w-40" /><Skeleton class="h-3 w-28" />
    </div>
  </div>
</template>

使用说明

RTL

Skeleton 只占位布局；在 RTL 页面中应按最终内容的逻辑方向排列。

变体

Skeleton 没有公开变体；通过 class 指定最终内容对应的宽高和圆角。

可访问性

Skeleton 本身不应被当作内容朗读；加载区域应由外围使用 aria-busy，并为持续时间较长的加载提供可读状态文本。

API 参考

属性	类型	默认值	说明
`as`	`string \| Component`	`'div'`	占位元素。
`asChild`	`boolean`	`false`	将占位样式合并到唯一子元素。
`class`	`HTMLAttributes["class"]`	`undefined`	设置与真实内容一致的尺寸和形状。