Esqueleto

Marcador de posición mientras se espera la carga de contenido.

Uso básico

Uso básico

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

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

Props de Skeleton

Prop	Descripción	Tipo	Opciones	Predeterminado
loading	Si se muestra el esqueleto (con false se renderizan los nodos hijos)	boolean	—	true
rows	Número de líneas de texto	number	—	3
avatar	Si se incluye un marcador circular de avatar	boolean	—	false
animated	Si se activa la animación	boolean	—	true
sx	Propiedad abreviada de diseño	SxProps	—	—

Props de SkeletonItem

LhSkeletonItem es un bloque de marcador exportado de forma independiente; puede usarse solo para componer cualquier estructura de esqueleto.

Prop	Descripción	Tipo	Opciones	Predeterminado
variant	Forma del bloque de marcador	'text' | 'rect' | 'circle'	—	'text'
animated	Si se activa la animación	boolean	—	true
className	Clase añadida	string	—	—
style	Estilo en línea añadido	CSSProperties	—	—
sx	Propiedad abreviada de diseño	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>
  )
}

Cálculo del ancho de línea

Cuando rows > 1, la última línea se reduce al 60% para simular la composición real de un párrafo; el elemento raíz debe tener un ancho determinado (el ancho de línea es porcentual).

Accesibilidad

El contenedor del esqueleto emite aria-busy="true" + aria-live="polite"; todos los bloques de marcador son aria-hidden, de modo que, cuando los datos están listos, el lector de pantalla anuncia el contenido real. Con prefers-reduced-motion la animación se degrada automáticamente a un marcador estático.

Estilos

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