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;" />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`.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
as | 'div' | 'span' | 'div' | El elemento HTML con el que se renderiza el skeleton. |
animation | 'wave' | 'pulse' | 'wave' | La animación que se reproduce mientras carga el contenido. |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | El skeleton puede tener forma circular, redondeada o cuadrada. |
justify | boolean | El skeleton ocupa todo el ancho del contenedor. | |
ref bindable | HTMLElement | La referencia del DOM del elemento skeleton. | |
| HTML Attributes |