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 | null | La referencia del DOM del elemento skeleton. | |
| HTML Attributes |