Uso avanzato

Scope, controllo per-contenitore, temi scoped e animazioni personalizzate.

Uso avanzato

Scope

<Skeletonizer> può essere annidato liberamente. Ogni istanza può sovrascrivere lo stato globale e l'animazione solo per il proprio sottoalbero:

<Skeletonizer :enabled="globalLoading">
  <Header />

  <!-- Questa scheda usa il proprio flag di caricamento e un'animazione diversa -->
  <Skeletonizer :enabled="cardLoading" animation="pulse">
    <PromoCard />
  </Skeletonizer>
</Skeletonizer>

La prop enabled di uno scope ha sempre la precedenza sul flag globale. Ometterla per seguire lo stato globale.

Controllo per-contenitore tramite il composable

Poiché il controllo è centralizzato in uno store reattivo, puoi pilotare gli skeleton da qualsiasi punto — una toolbar, un route guard, un'azione Pinia:

const { enable, disable, refresh } = useSkeletonizer()

watch(() => route.params.id, async () => {
  enable()
  await loadData()
  disable()
})

Chiama refresh() dopo che il DOM cambia al di fuori della reattività di Nuxt (ad es. un widget di terze parti che ha montato nuovi nodi) per riscansionare tutti gli host.

Temi scoped

Applica un tema a un singolo sottoalbero senza toccare il resto della pagina:

<Skeletonizer :enabled="pending" :theme="{ baseColor: '#fde68a', highlightColor: '#fffbeb' }">
  <PromoBanner />
</Skeletonizer>

Animazioni personalizzate

Registra la tua animazione a runtime e attivala:

const { registerAnimation, setAnimation } = useSkeletonizer()

registerAnimation({
  name: 'blink',
  css: `
    @keyframes sk-blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
    .sk-anim-blink .sk-bone { animation: sk-blink var(--sk-duration) infinite }
  `,
})

setAnimation('blink')

Vedi Temi per il riferimento completo sulle animazioni.

Pilotare il motore

Usa le direttive per regolare con precisione cosa viene skeletonizzato:

<Skeletonizer :enabled="pending">
  <Logo v-skeleton-keep />                 <!-- sempre reale -->
  <span v-skeleton-replace="'badge'">{{ status }}</span>
  <li v-for="i in items" v-skeleton-union>{{ i.label }}</li>
</Skeletonizer>