Skeleton

Kontent yuklanishidan oldin uning shakliga taqlid qiluvchi joy egallovchi yuklash indikatorlari.

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

Paragrafga o‘xshash skeleton hosil qilish uchun linesdan foydalaning. Tabiiy ko‘rinish uchun oxirgi qator avtomatik ravishda qisqaroq bo‘ladi.

<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

Realistik yuklash joy egallovchilarini qurish uchun skeletonlarni birlashtiring.

<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

Skeleton va haqiqiy kontent o‘rtasida almashish uchun loading prop’dan foydalaning.

<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'	Skeleton shakli
animation	'wave' | 'pulse' | 'none'	'wave'	Animatsiya turi
width	string | number	—	Moslashtirilgan kenglik (raqam px sifatida qabul qilinadi)
height	string | number	—	Moslashtirilgan balandlik (raqam px sifatida qabul qilinadi)
rounded	string | number	—	Moslashtirilgan border radius o‘zgartirishi
loading	boolean	true	true bo‘lsa skeleton, false bo‘lsa standart slotni ko‘rsatadi
lines	number	1	Render qilinadigan matn qatorlari soni

Slots

Slot	Description
default	loading false bo‘lganda ko‘rsatiladigan kontent