Cerca...

Cerca nella documentazione...

Skeleton

Skeleton

Un blocco segnaposto pulsante per gli stati di caricamento — semplicemente un <div> stilizzato, dimensionato via className.

import { Skeleton } from "@pompeitech/vesuvius-ui";

Default

Uno skeleton per card

API

Skeleton

Ogni prop nativa di <div> — forma e dimensione derivano interamente da className (un placeholder circolare per avatar è size-12 rounded-full, una riga di testo è h-4 w-40, e così via). Nessuna prop variant/shape, per scelta progettuale, dato che le forme necessarie sono illimitate.

PropTipoDescrizione
classNamestringOgni proprietà visiva — dimensione, raggio, spaziatura — viene espressa qui invece che tramite prop dedicate.

Accessibilità

Puramente visivo — non ha un proprio ruolo ARIA. Avvolgi la regione in caricamento con aria-busy="true" sul suo contenitore (e rimuovilo una volta che il contenuto reale sostituisce gli skeleton) se vuoi che la tecnologia assistiva sappia che uno stato di caricamento è in corso, invece di vedere silenziosamente blocchi placeholder vuoti.