Skeleton

Плейсхолдеры индикации загрузки, имитирующие форму контента до его загрузки.

Basic

<VxSkeleton />
<VxSkeleton />
<VxSkeleton width="60%" />

Variants

<VxSkeleton variant="text" />
<VxSkeleton variant="circular" />
<VxSkeleton variant="rectangular" :height="100" />
<VxSkeleton variant="rounded" :height="100" />

Animations

Wave (default)

Pulse

None

<VxSkeleton animation="wave" />
<VxSkeleton animation="pulse" />
<VxSkeleton animation="none" />

Multi-line Text

Используйте lines, чтобы создать скелетон, похожий на абзац. Последняя строка автоматически короче для естественного вида.

<VxSkeleton :lines="3" />
<VxSkeleton :lines="5" />

Custom Sizes

<VxSkeleton variant="circular" :width="32" :height="32" />
<VxSkeleton variant="circular" :width="48" :height="48" />
<VxSkeleton variant="circular" :width="64" :height="64" />
<VxSkeleton variant="rounded" :width="200" :height="120" />

Custom Border Radius

<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="0" />
<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="8" />
<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="24" />

Card Composition

Комбинируйте скелетоны, чтобы построить реалистичные плейсхолдеры загрузки.

<div class="card">
  <VxSkeleton variant="rounded" :height="160" />
  <div class="card-header">
    <VxSkeleton variant="circular" :width="40" :height="40" />
    <div>
      <VxSkeleton width="60%" />
      <VxSkeleton width="40%" />
    </div>
  </div>
  <VxSkeleton :lines="3" />
</div>

Loading State

Используйте проп loading, чтобы переключаться между скелетоном и реальным контентом.

<script setup>
import { ref } from 'vue'
const loaded = ref(false)
</script>

<template>
  <VxSkeleton variant="circular" :width="48" :height="48" :loading="!loaded">
    <VxAvatar size="lg" name="Jane Doe" />
  </VxSkeleton>

  <VxSkeleton width="50%" :loading="!loaded">
    <span>Jane Doe</span>
  </VxSkeleton>

  <VxSkeleton :lines="2" :loading="!loaded">
    <p>Building delightful user interfaces...</p>
  </VxSkeleton>
</template>

API

Props

Prop	Type	Default	Description
variant	'text' | 'circular' | 'rectangular' | 'rounded'	'text'	Форма скелетона
animation	'wave' | 'pulse' | 'none'	'wave'	Тип анимации
width	string | number	—	Пользовательская ширина (число трактуется как px)
height	string | number	—	Пользовательская высота (число трактуется как px)
rounded	string | number	—	Переопределение скругления углов
loading	boolean	true	Показывать скелетон при true, слот по умолчанию при false
lines	number	1	Количество отображаемых строк текста

Slots

Slot	Description
default	Содержимое, отображаемое, когда loading равно false