Esqueleto

Ofrece un marcador de posición mientras termina la carga del contenido. Los bloques de marcador llevan aria-hidden para ocultarlos de los lectores de pantalla, y el contenedor notifica los cambios del estado de carga con aria-busy y aria-live; la animación de brillo respeta prefers-reduced-motion.

Uso básico

Uso básico

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

const skeletonLoading = ref(true)
</script>

<template>
  <!-- Uso básico -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Contenido cargado: todas las aves se han ido volando, una nube solitaria se aleja tranquila.</p>
  </LhSkeleton>
  <!-- Conmutar estado de carga -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Mostrar contenido' : 'Mostrar esqueleto' }}
  </LhButton>
</template>

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

<template>
  <!-- Uso básico -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Contenido cargado: todas las aves se han ido volando, una nube solitaria se aleja tranquila.</p>
  </LhSkeleton>
  <!-- Conmutar estado de carga -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Mostrar contenido' : 'Mostrar esqueleto' }}
  </LhButton>
</template>

Composición con avatar

Composición con avatar

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

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

<script>
export default {}
</script>

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

Desactivar la animación

Esqueleto estático

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

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

<script>
export default {}
</script>

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

Bloques de marcador independientes con 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>

Skeleton API

Props

Prop	Descripción	Tipo	Predeterminado
loading	Estado de carga (con false se renderiza el slot default)	boolean	true
rows	Número de líneas de texto	number	3
avatar	Si se incluye un marcador de avatar circular	boolean	false
animated	Si se activa la animación	boolean	true
sx	Props de maquetación rápida sx	LhSxProps	—

Slots

Slot	Descripción
default	Contenido real que se renderiza cuando loading es false

SkeletonItem API

Props

Prop	Descripción	Tipo	Predeterminado
variant	Forma del bloque de marcador	'text' | 'rect' | 'circle'	'text'
animated	Si se activa la animación	boolean	true
sx	Props de maquetación rápida sx	LhSxProps	—

Variables de tema

Variable	Descripción	Predeterminado
--lh-skeleton-bg	Color de fondo del bloque de marcador	Mezcla al 10 % de opacidad del color de tinta (text-regular)
--lh-skeleton-highlight	Color del brillo deslizante	Color de fondo aclarado un 45 % hacia el blanco
--lh-skeleton-radius	Redondeado base	--lh-border-radius-small

Accesibilidad

• Los bloques de marcador llevan aria-hidden="true" y no entran en la lectura de pantalla
• El contenedor lleva aria-busy="true" + aria-live="polite"; al terminar la carga y cambiar el contenido se anuncia automáticamente
• Con prefers-reduced-motion: reduce la animación de brillo se desactiva

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/skeleton/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhSkeletonProps

export interface LhSkeletonProps {
  /** Estado de carga (con false se renderiza el contenido real del slot default) */
  loading?: boolean
  /** Número de líneas de texto */
  rows?: number
  /** Si se incluye un marcador de avatar circular */
  avatar?: boolean
  /** Si se activa la animación */
  animated?: boolean
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** Forma del bloque de marcador */
  variant?: LhSkeletonVariant
  /** Si se activa la animación */
  animated?: boolean
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

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

/** Forma del bloque de marcador del esqueleto */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'