Esqueleto

Marcador de posición durante la carga del contenido. LhSkeleton ofrece un marcador compuesto (avatar + líneas de texto); LhSkeletonItem permite combinar formas libremente.

Esqueleto

<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>Xi Shan Xing Lü Tu</strong>
            <p>Fan Kuan, dinastía Song del Norte. Las montañas y las rocas se trazan con la textura de gotas de lluvia, de un vigor imponente.</p>
          </div>
        </LhSkeleton>
      </div>
      <div style="width: 260px">
        <p class="demo-note">SkeletonItem: combinación libre de formas</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">loading=false renderiza el contenido real</p>
    <LhSkeleton :loading="false" :rows="2">
      <p>Este es el contenido real: al desactivarse loading, el esqueleto deja paso al slot.</p>
    </LhSkeleton>
    <LhButton size="small" style="margin-top: 12px" @click="toggle">
      {{ loading ? 'Ocultar el estado de carga' : 'Volver a cargar' }}
    </LhButton>
  </div>
</template>

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

Skeleton Props

Propiedad	Descripción	Tipo	Predeterminado
loading	Si está en estado de carga (con false se renderiza el contenido real del slot por defecto)	boolean	false
rows	Número de líneas de texto	number	—
avatar	Si se incluye el marcador de posición del avatar circular	boolean	false
animated	Si se activa la animación	boolean	false
sx	Propiedad de diseño rápido sx	—	—

SkeletonItem Props

Propiedad	Descripción	Tipo	Predeterminado
variant	Forma del bloque de marcador de posición	'text' \| 'rect' \| 'circle'	'text'
animated	Si se activa la animación	boolean	false
sx	Propiedad de diseño rápido sx	—	—

Slots

Slot por defecto de LhSkeleton: el contenido real que se renderiza cuando loading=false.