wiki-Skeleton

Ver en Git

---

Skeleton

El componente Skeleton se utiliza para mostrar un diseño de carga animado que indica a los usuarios que se está cargando contenido. Ofrece diferentes tipos de esqueletos (círculos, bloques, filas, párrafos y perfiles) que se adaptan a varios casos de uso.

---

Referencia de la API

Props

Propiedad	Tipo	Descripción	Predeterminado
type	'circle' | 'profile' | 'paragraph' | 'block' | 'full'	Tipo de esqueleto que se renderizará.	'block'
active	boolean	Si está activado, muestra una animación de carga.	true
rows	number	Cantidad de filas (solo para el tipo paragraph).	4
size	'small' | 'normal' | 'large'	Tamaño del esqueleto.	'normal'
style	CSSProperties	Estilo en línea adicional para el contenedor principal.	undefined
className	string	Clases CSS adicionales para personalizar el estilo del componente.	''
aura-test	string	Identificador de prueba para uso en test automatizados.	'aura-skeleton'

SkeletonBase Props

Propiedad	Tipo	Descripción	Predeterminado
type	'circle' | 'block' | 'row'	Tipo de esqueleto base que se renderizará.	Requerido
active	boolean	Si está activado, muestra una animación de carga.	true
size	'small' | 'normal' | 'large'	Tamaño del esqueleto.	Requerido
style	CSSProperties	Estilo en línea adicional para el contenedor principal.	undefined
className	string	Clases CSS adicionales para personalizar el estilo del componente.	Requerido
aura-test	string	Identificador de prueba para uso en test automatizados.	'aura-skeleton'

---

Ejemplo de uso

Cargar contenido de perfil

import { Skeleton } from '@auravant/ui-kit';

const isLoading = true;

<div>
 {isLoading ? (
 <Skeleton type="profile" />
 ) : (
 <div>
 <img src="user-avatar.jpg" alt="Avatar" />
 <p>Nombre: Usuario Ejemplo</p>
 </div>
 )}
</div>;

Esqueleto de párrafo

<Skeleton type="paragraph" rows={3} size="small" />

Esqueleto en bloque completo

<Skeleton type="full" style={{ height: '200px', width: '100%' }} />

---

Notas

1. Personalización de estilos: Puedes personalizar los estilos de cada tipo de esqueleto utilizando las clases CSS proporcionadas o añadiendo las tuyas propias a través de la propiedad className.
2. Animaciones: La animación de carga puede desactivarse estableciendo active={false}.
3. Tipos combinados: Algunos tipos como profile ya incluyen estructuras más complejas, como una imagen circular con un párrafo debajo.