Todos los componentes (204)

Esqueleto

Superficies · Skeleton · .amset-skeleton

Qué es y cuándo usarlo

Hueco gris, con un brillo que pasa, mientras llega el contenido. Guarda el sitio con la forma de lo que va a llegar (líneas de texto, un título, un bloque, un círculo), para que la página no pegue un salto al cargar.

Cuándo usarlo

Cargas de más de un instante en las que se sabe la forma de lo que viene: una lista, una ficha, una tarjeta.
shape="text" (por defecto) pinta lines líneas, con la última más corta; title, block y circle son una pieza suelta.
size (de xs a xl) le da el grosor de un texto de ese tamaño y, en circle, el lado del Avatar del mismo tamaño: el hueco no salta cuando llega la foto.
width, height y radius para cuadrarlo con lo que sustituye (un avatar, una foto, una tarjeta). En text, el ancho es el del párrafo y el alto y el radio, los de cada línea.

Cuándo no

Una tarea que avanza y acaba (subir un fichero, importar): Progress.
Esperar a que responda un botón: Button con loading.
La cifra de un cuadro de mando: Stat con loading, que ya reserva el hueco del número.

Teclado: no es enfocable.

Accesibilidad: es decorativo a propósito (aria-hidden): oír «imagen, imagen, imagen» no ayuda a nadie. Lo que dice que algo se está cargando es el contenedor, con aria-busy (la Card lo pone con loading), o un texto de estado. Con movimiento reducido se queda quieto y sin brillo; withoutAnimation lo deja quieto siempre, en todas las formas (en text, todas las líneas).

Aspecto fino: variables CSS --amset-skeleton-*: -duration (una pasada del brillo, dos vueltas de --amset-duration-spin), -color (un 10 % de la tinta sobre lo que haya detrás: se ve igual sobre el fondo, sobre una tarjeta o sobre una fila alterna), -shine, -radius, -line, -title y -circle. En md: línea de 0,75rem, título de 1,25rem al 40 % del ancho, bloque de 8rem y círculo de 2,25rem, el del avatar. El brillo se mueve con transform, sin repintar.

Cómo se ve

<Skeleton shape="title" width="12ch" />
<Skeleton shape="text" lines={3} />

Props

Se importa con import { Skeleton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`height`	`string`	Alto del hueco; en la forma `text`, el de cada línea.
`lines`	`number`	Cuántas líneas, para la forma `text`. La última sale más corta.
`radius`	`string`	Radio propio: para cuadrar con la tarjeta o el avatar al que sustituye. En la forma `text`, el de cada línea.
`shape`	`SkeletonShape`	—
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Lo que sustituye, en el mismo tamaño: el grosor de las lineas de `text` y de `title`, y el diametro del `circle`, que es el del `Avatar` de ese mismo tamaño (asi el hueco no pega un salto cuando llega la foto).
`width`	`string`	Ancho del hueco; en la forma `text`, el del párrafo entero.
`withoutAnimation`	`boolean`	Quieto, sin brillo; en la forma `text`, todas las líneas. Con movimiento reducido ya se queda quieto solo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-skeleton-duration`	`calc(var(--amset-duration-spin) * 2)`
`--amset-skeleton-color`	`color-mix(in oklab, var(--amset-ink) 10%, transparent)`
`--amset-skeleton-shine`	`color-mix(in oklab, var(--amset-surface) 55%, transparent)`
`--amset-skeleton-radius`	`var(--amset-radius-sm)`
`--amset-skeleton-line`	`0.75rem`
`--amset-skeleton-title`	`1.25rem`
`--amset-skeleton-circle`	`2.25rem`

Cómo se cambia

.amset-skeleton {
  --amset-skeleton-duration: ...;
  --amset-skeleton-color: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: