Panoramica
Skeleton fornisce una forma segnaposto con i colori del tema e un’evidenziazione in movimento. Componi le forme nel layout del contenuto in caricamento. L’applicazione gestisce lo stato di caricamento e i layout specifici della funzionalità.
Utilizzo
layout="inline" per inserire un segnaposto all’interno di una riga di testo.
Le dimensioni numeriche usano i pixel. Sono supportate anche le lunghezze CSS come le percentuali e em. Senza dimensioni, il segnaposto riempie la larghezza disponibile e usa l’altezza del carattere ereditata. Usa dimensioni uguali e borderRadius="50%" per un cerchio.
SKELETON_HEIGHT_SIZES fornisce altezze condivise per xs (13px), s (16px), m (24px), l (32px) e xl (40px). Mantieni nell’applicazione le dimensioni specifiche del layout.
Ogni Skeleton visualizza un segnaposto. Mantieni le righe ripetute, la spaziatura delle righe di testo e le aree di caricamento nei componenti dell’applicazione che racchiudono il primitivo.
Movimento e accessibilità
Gli skeleton sono decorativi e per impostazione predefinita hannoaria-hidden="true". Mantieni gli annunci di caricamento in una regione di stato gestita dall’host invece di annunciare ogni forma. Skeleton non accetta elementi figlio.
L’evidenziazione si sposta da sinistra a destra in un ciclo ease-in-out di 1,5 secondi ed è nascosta quando l’utente preferisce il movimento ridotto. Passa animated={false} per un segnaposto statico.
Composizione e tema
Le props native,className, style e ref hanno come destinazione lo span del segnaposto. Usa render per comporre un altro elemento. Gli stili nativi espliciti sovrascrivono le props di dimensione e colore.
Per impostazione predefinita, i colori di base e di evidenziazione corrispondono allo sfondo terziario del tema e a uno sfondo trasparente più chiaro. Usa baseColor, highlightColor e borderRadius per sovrascriverli. Gli angoli rimangono arrotondati, anche quando il tema usa gli squircles. Il raggio predefinito utilizza il token del tema smRound (4px). Passa themeCssVariables.border.radius.mdRound da twenty-ui/theme per angoli di 8px. I raggi personalizzati in pixel e CSS rimangono supportati, inclusi borderRadius={80} per una capsula stretta e borderRadius="50%" per un cerchio. Dopo aver caricato twenty-ui/style.css e il tema dell’interfaccia utente, non è necessario alcun provider specifico per Skeleton né alcuna importazione di fogli di stile.
Props
boolean
predefinito:"true"
Animate the highlight by default. Reduced-motion preferences always disable animation.
Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.
BackgroundColor
Placeholder background color. Defaults to the theme tertiary background.
BorderRadius<string | number>
Round corner radius in pixels or a CSS length. Defaults to the 4px smRound theme token. Use mdRound for 8px corners or a custom radius for circles and capsules.
string
CSS class merged with the placeholder class.
Height<string | number>
Placeholder height in pixels or a CSS length. Defaults to the inherited font height.
BackgroundColor
Animated highlight color. Defaults to the theme lighter transparent background.
"block" | "inline"
predefinito:"block"
block renders a block without a text node. inline sizes and aligns the placeholder like a line of text.Ref<HTMLSpanElement>
Ref to the placeholder span, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Element or render callback composed through Base UI useRender.
CSSProperties
Native styles merged with the placeholder dimensions and colors. Explicit styles win.
Width<string | number>
Placeholder width in pixels or a CSS length. Defaults to the available width and never exceeds the container.