Componenti

L'host Skeletonizer e le nove primitive manuali.

Componenti

Tutti i componenti vengono importati automaticamente.

L'output renderizzato è SVG. Ogni skeleton — automatico o manuale — viene dipinto come un singolo overlay <svg> di forme <rect> e <circle>, non come un albero di elementi <div class="skeleton-*">. Il contenuto reale resta nel DOM (nascosto con visibility: hidden) così il layout è preservato; l'<svg> sta in posizione assoluta sopra, con il suo viewBox bloccato sul bounding box dell'host.

Ogni componente di questa pagina rispetta le stesse regole di preservazione delle dimensioni del motore automatico: le prop width/height/radius vengono disegnate esattamente come fornite (mai randomizzate o arrotondate via), e <SkeletonImage> non deforma mai un aspect-ratio configurato. L'unica differenza è cosa c'è da misurare — una primitiva manuale come <SkeletonText :lines="3" /> non ha testo reale da cui leggere una larghezza per riga (viene renderizzata al posto dello slot di default durante il caricamento), quindi lastLineWidth resta una prop esplicita e deterministica anziché una misurazione. Il motore automatico, che scansiona testo reale già renderizzato, preferisce sempre la larghezza per riga misurata quando è disponibile.

`<Skeletonizer>`

L'host del motore. Avvolgi qualsiasi sottoalbero; tutto ciò che è all'interno viene skeletonizzato automaticamente quando è attivo.

Prop	Tipo	Predefinito	Descrizione
`enabled`	`boolean`	(globale)	Override di scope per il flag globale enabled.
`animation`	`string`	(globale)	Preset di animazione per questo scope.
`shimmer`	`boolean`	(globale)	Se l'animazione è in esecuzione.
`autoScan`	`boolean`	(globale)	Esegue il motore di scansione del DOM.
`theme`	`object`	–	Override scoped dei token del tema.
`tag`	`string`	`'div'`	Tag del wrapper (usa `display: contents`).

Espone scan() e restore() tramite template ref.

Primitive manuali

Componente	Prop principali
`<SkeletonBlock>`	`width`, `height`, `radius`, `circle`
`<SkeletonText>`	`lines`, `lineHeight`, `gap`, `lastLineWidth`
`<SkeletonAvatar>`	`size`, `shape` (`circle`/`square`), `radius`
`<SkeletonImage>`	`width`, `height`, `aspectRatio`, `radius`
`<SkeletonButton>`	`width`, `height`, `radius`, `block`
`<SkeletonCard>`	`media`, `avatar`, `footer`, `lines`
`<SkeletonContainer>`	`layout` (`flex`/`grid`), `direction`, `columns`, `gap`
`<SkeletonList>`	`items`, `avatar`, `lines`, `gap`
`<SkeletonTable>`	`rows`, `columns`, `header`, `gap`

Ogni primitiva accetta anche gli override animation e shimmer e adotta il tema globale.

<template>
  <SkeletonText :lines="4" last-line-width="40%" />
  <SkeletonAvatar :size="64" />
  <SkeletonCard media avatar footer :lines="3" />
</template>

Ogni primitiva renderizza SVG inline. Ad esempio, <SkeletonAvatar :size="64" /> produce all'incirca:

<svg role="img" aria-label="Loading" width="64" height="64" viewBox="0 0 64 64">
  <defs>
    <linearGradient id="sk-shimmer-1" gradientUnits="userSpaceOnUse">
      <!-- gradiente shimmer condiviso + <animateTransform> -->
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="32" fill="url(#sk-shimmer-1)" />
</svg>

Un <SkeletonText :lines="4" /> emette un <rect> per riga dentro lo stesso <svg>, condividendo il gradiente. Provale tutte dal vivo nella Vetrina.