Uso di base

Avvolgi e attiva

Il pattern fondamentale è un singolo wrapper <Skeletonizer> collegato al tuo stato di caricamento:

<script setup lang="ts">
const { data: user, pending } = await useLazyFetch('/api/user')
</script>

<template>
  <Skeletonizer :enabled="pending">
    <article class="profile">
      <img :src="user?.avatar" width="64" height="64" class="avatar">
      <h1>{{ user?.name }}</h1>
      <p>{{ user?.bio }}</p>
      <button>Segui</button>
    </article>
  </Skeletonizer>
</template>

Mentre pending è true, l'avatar, il titolo, il paragrafo e il pulsante vengono renderizzati come ossa animate. Quando la fetch si risolve, gli originali vengono ripristinati all'istante — nello stesso punto, senza alcuno spostamento del layout.

Controllo globale

Da qualsiasi punto della tua app puoi pilotare lo stato globale dello skeleton:

const skeletonizer = useSkeletonizer()
skeletonizer.enable()
skeletonizer.disable()
skeletonizer.toggle()

Qualsiasi <Skeletonizer> senza una prop :enabled esplicita segue questo flag globale.

Primitive manuali

Preferisci comporre uno skeleton a mano (ad es. per contenuti non ancora renderizzati)? Usa i mattoncini di base:

<template>
  <SkeletonList :items="6" :lines="2" />
  <SkeletonTable :rows="10" :columns="5" />
  <SkeletonCard media avatar :lines="3" />
</template>

Vedi Componenti per l'elenco completo.