Direttive

Controllo granulare sul motore automatico.

Direttive

Usa le direttive dentro un <Skeletonizer> per pilotare il motore automatico.

DirettivaEffetto
v-skeleton-ignoreEsclude l'elemento e il suo sottoalbero dalla skeletonizzazione.
v-skeleton-keepMantiene visibile il contenuto originale dentro un albero altrimenti skeletonizzato.
v-skeleton-replace="'avatar'"Forza un tipo di osso specifico sull'elemento (salta il sottoalbero).
v-skeleton-unionComprime l'elemento e il suo sottoalbero in un singolo osso.
v-skeleton-shimmerApplica solo l'overlay shimmer, mantenendo visibile il contenuto.

Esempi

<Skeletonizer :enabled="pending">
  <!-- Logo del brand sempre mostrato -->
  <header v-skeleton-keep>
    <Logo />
  </header>

  <!-- Ogni riga diventa un'unica osso fusa invece di tante piccole -->
  <ul>
    <li v-for="item in items" :key="item.id" v-skeleton-union>
      {{ item.label }}
    </li>
  </ul>

  <!-- Forza un tipo di osso specifico -->
  <span v-skeleton-replace="'badge'">{{ status }}</span>

  <!-- Mantieni il valore reale ma aggiungi uno shimmer durante il refresh -->
  <strong v-skeleton-shimmer>{{ price }}</strong>
</Skeletonizer>

Tipi di replace

v-skeleton-replace accetta qualsiasi tipo di osso: text, heading, image, avatar, badge, tag, button, icon, input, textarea, select, checkbox, radio, switch, oppure block (il predefinito quando non viene fornito alcun valore).

Note

  • v-skeleton-ignore e v-skeleton-keep impediscono entrambi al motore di scendere nel sottoalbero; usa keep per segnalare l'intento ("mostra qui la cosa reale").
  • Le direttive impostano attributi dato che il motore legge ad ogni scansione, quindi modificare un valore collegato (v-skeleton-ignore="cond") aggiorna il comportamento alla riscansione successiva.