Squelette

Contenu de remplacement pendant le chargement. LhSkeleton offre un agencement combiné (avatar + lignes de texte), LhSkeletonItem se compose librement par formes.

Squelette

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 24px; align-items: flex-start; flex-wrap: wrap">
      <div style="width: 260px">
        <p class="demo-note">avatar + rows + animated</p>
        <LhSkeleton :loading="loading" :rows="3" avatar animated>
          <div>
            <strong>Voyageurs parmi les montagnes et les rivières</strong>
            <p>Fan Kuan, dynastie Song du Nord. Les rochers sont peints au moyen de touches en gouttes de pluie, dégageant une puissance majestueuse.</p>
          </div>
        </LhSkeleton>
      </div>
      <div style="width: 260px">
        <p class="demo-note">SkeletonItem : formes librement combinées</p>
        <LhSkeletonItem variant="rect" style="width: 100%; height: 120px" animated />
        <LhSkeletonItem variant="text" style="margin-top: 12px" animated />
        <div class="demo-row" style="gap: 12px; margin-top: 12px">
          <LhSkeletonItem variant="circle" style="width: 40px; height: 40px" animated />
          <LhSkeletonItem variant="text" style="flex: 1" animated />
        </div>
      </div>
    </div>
    <p class="demo-note">Avec loading=false, le contenu réel est rendu</p>
    <LhSkeleton :loading="false" :rows="2">
      <p>Ceci est le contenu réel : lorsque loading est désactivé, le squelette cède la place au slot.</p>
    </LhSkeleton>
    <LhButton size="small" style="margin-top: 12px" @click="toggle">
      {{ loading ? 'Masquer le chargement' : 'Recharger' }}
    </LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),
  methods: {
    toggle() {
      this.loading = !this.loading
    },
  },
}
</script>

Skeleton Props

Propriété	Description	Type	Valeur par défaut
loading	Indique l'état de chargement (sur false, le contenu réel du slot par défaut est rendu)	boolean	false
rows	Nombre de lignes de texte	number	—
avatar	Inclut un espace réservé d'avatar circulaire	boolean	false
animated	Active l'animation	boolean	false
sx	Raccourci de mise en page sx	—	—

SkeletonItem Props

Propriété	Description	Type	Valeur par défaut
variant	Forme de l'espace réservé	'text' \| 'rect' \| 'circle'	'text'
animated	Active l'animation	boolean	false
sx	Raccourci de mise en page sx	—	—

Slots

Slot par défaut de LhSkeleton : le contenu réel rendu lorsque loading=false.