Squelette

Fournit un cadre de remplacement avant la fin du chargement du contenu. Les blocs de remplacement sont masqués aux lecteurs d'écran via aria-hidden, et le conteneur notifie les changements d'état de chargement avec aria-busy et aria-live ; l'animation de survol respecte prefers-reduced-motion.

Utilisation de base

Utilisation de base

<script setup lang="ts">
import { ref } from 'vue'

const skeletonLoading = ref(true)
</script>

<template>
  <!-- Utilisation de base -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Contenu chargé : tous les oiseaux se sont envolés au loin, un nuage solitaire s'éloigne en paix.</p>
  </LhSkeleton>
  <!-- Bascule de l'état de chargement -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Afficher le contenu' : 'Afficher le squelette' }}
  </LhButton>
</template>

<script>
export default {
  data() {
    return { skeletonLoading: true }
  },
}
</script>

<template>
  <!-- Utilisation de base -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Contenu chargé : tous les oiseaux se sont envolés au loin, un nuage solitaire s'éloigne en paix.</p>
  </LhSkeleton>
  <!-- Bascule de l'état de chargement -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Afficher le contenu' : 'Afficher le squelette' }}
  </LhButton>
</template>

Combinaison avec avatar

Combinaison avec avatar

<script setup lang="ts">
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

Désactiver l'animation

Squelette statique

<script setup lang="ts">
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

Bloc de remplacement indépendant SkeletonItem

SkeletonItem

<script setup lang="ts">
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

API Skeleton

Props

Prop	Description	Type	Valeur par défaut
loading	État de chargement (quand false, le slot default est rendu)	boolean	true
rows	Nombre de lignes de texte	number	3
avatar	Inclure ou non un emplacement d'avatar circulaire	boolean	false
animated	Activer ou non l'animation	boolean	true
sx	Props de mise en page sx	LhSxProps	—

Slots

Slot	Description
default	Contenu réel rendu lorsque loading vaut false

API SkeletonItem

Props

Prop	Description	Type	Valeur par défaut
variant	Forme du bloc de remplacement	'text' | 'rect' | 'circle'	'text'
animated	Activer ou non l'animation	boolean	true
sx	Props de mise en page sx	LhSxProps	—

Variables de thème

Variable	Description	Valeur par défaut
--lh-skeleton-bg	Couleur de fond du bloc de remplacement	Mélange à 10 % d'opacité de la couleur d'encre (text-regular)
--lh-skeleton-highlight	Couleur de surbrillance du flux lumineux	Couleur de fond éclaircie de 45 % vers le blanc
--lh-skeleton-radius	Rayon de base	--lh-border-radius-small

Accessibilité

• Les blocs de remplacement ont aria-hidden="true" et sont exclus de la lecture d'écran
• Le conteneur utilise aria-busy="true" + aria-live="polite", et annonce automatiquement le contenu une fois le chargement terminé
• L'animation de survol est automatiquement désactivée quand prefers-reduced-motion: reduce

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/skeleton/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhSkeletonProps

export interface LhSkeletonProps {
  /** État de chargement (quand false, le contenu réel du slot default est rendu) */
  loading?: boolean
  /** Nombre de lignes de texte */
  rows?: number
  /** Inclure ou non un emplacement d'avatar circulaire */
  avatar?: boolean
  /** Activer ou non l'animation */
  animated?: boolean
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** Forme du bloc de remplacement */
  variant?: LhSkeletonVariant
  /** Activer ou non l'animation */
  animated?: boolean
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSkeletonVariant _{(provenant de @lh-ui/share/core/skeleton)}

/** Forme du bloc de remplacement du squelette */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'