Skeleton

El componente skeleton proporciona un marcador de posición para contenido que se está cargando, dando a los usuarios una indicación visual de dónde aparecerá el contenido una vez cargado.

Uso

El skeleton renderiza un elemento marcador de posición y ajusta su tamaño mediante HTML/CSS estándar. Usa los atributos `style`, `class`, `width` y `height` (o la prop `justify`) para controlar sus dimensiones.

<script>
	import { Skeleton } from 'fluentui-svelte';
</script>

<Skeleton style="width: 42px;" />
<Skeleton justify style="height: 12px;" />

API del componente

Una breve explicación de las props que realmente necesitan explicación. Puedes ver el resto de las props aquí.

Animación

La prop `animation` controla qué tipo de animación se usa para el skeleton. Puede establecerse en `pulse` o `wave`. El valor predeterminado es `wave`.

Justify

Controla si el skeleton debe ocupar todo el ancho de su contenedor o no. El valor predeterminado es `false`, lo que significa que solo tomará la proporción `1:1` de su ancho.

Forma

La prop `shape` te permite cambiar la forma del skeleton. Puede establecerse en `circle`, `square` o `rounded`. El valor predeterminado es `rounded`.

As

La prop `as` te permite elegir la etiqueta HTML utilizada para renderizar el skeleton. Valores posibles: `'div'` (predeterminado) o `'span'`.

Props del componente

Name	Type	Description
as	'div' | 'span'	El elemento HTML utilizado para renderizar el skeleton. Predeterminado: `'div'`.
animation	'wave' | 'pulse'	El tipo de animación del skeleton. Predeterminado: `'wave'`.
shape	'circle' | 'rounded' | 'square'	La forma del skeleton. Predeterminado: `'rounded'`.
justify	boolean	Si es `true`, el skeleton ocupa todo el ancho de su contenedor; de lo contrario, mantiene una relación de aspecto `1:1` basada en su ancho.
element	HTMLElement	La referencia DOM del elemento skeleton (`bind:element`).
Element Attributes		Todos los demás atributos se pasan al elemento raíz del skeleton.