基础

Skeleton 加载占位

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

资源

导入

import { Skeleton } from 'moriui'

RTL

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

示例

概览

头像与文字占位组合。

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

API

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

无障碍说明

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

关联组件

内容卡片信息条目