Squelette

Espace réservé en attendant le chargement de contenu.

Utilisation de base

Utilisation de base

import { LhSkeleton } from '@lh-ui/react'

export default function Demo() {
  return <LhSkeleton avatar rows={2} sx={{ w: 300 }} />
}

Skeleton Props

Prop	Description	Type	Options	Valeur par défaut
loading	Afficher le squelette (avec false, les nœuds enfants sont rendus)	boolean	—	true
rows	Nombre de lignes de texte	number	—	3
avatar	Inclure un espace réservé circulaire d'avatar	boolean	—	false
animated	Activer l'animation	boolean	—	true
sx	Raccourci de mise en page	SxProps	—	—

SkeletonItem Props

LhSkeletonItem est un bloc d'espace réservé exporté séparément, utilisable seul pour composer toute structure de squelette.

Prop	Description	Type	Options	Valeur par défaut
variant	Forme du bloc	'text' | 'rect' | 'circle'	—	'text'
animated	Activer l'animation	boolean	—	true
className	Nom de classe additionnel	string	—	—
style	Style en ligne additionnel	CSSProperties	—	—
sx	Raccourci de mise en page	SxProps	—	—

import { LhSkeletonItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, width: 300 }}>
      <LhSkeletonItem variant="circle" />
      <div style={{ flex: 1 }}>
        <LhSkeletonItem style={{ marginBottom: 8 }} />
        <LhSkeletonItem style={{ width: '60%' }} />
      </div>
    </div>
  )
}

Algorithme de largeur des lignes

Lorsque rows > 1, la dernière ligne est réduite à 60 % pour imiter la mise en page d'un vrai paragraphe ; l'élément racine doit avoir une largeur déterminée (la largeur des lignes est en pourcentage).

Accessibilité

Le conteneur du squelette émet aria-busy="true" + aria-live="polite" ; tous les blocs d'espace réservé sont aria-hidden, de sorte qu'une fois les données prêtes, le lecteur d'écran réannonce le contenu réel. Sous prefers-reduced-motion, l'animation est automatiquement dégradée en espace réservé statique.

Styles

import '@lh-ui/react/style/skeleton'