Todos los componentes (204)

Miniatura

Superficies · Thumbnail

Qué es y cuándo usarlo

Hueco de imagen con forma fija: la foto de un producto en una lista, el adjunto de un mensaje. Reserva el sitio desde el principio (la forma la pone aspect-ratio), así que la página no pega saltos cuando llegan las fotos. Si la imagen falla o no hay, queda el respaldo: nunca un icono roto.

Cuándo usarlo

Fotos pequeñas en listas, líneas de carrito, adjuntos, resultados de búsqueda.
ratio fija la forma (1:1, 4:3, 3:4 o 16:9) y width el tamaño (4rem por defecto).
fit="contain" deja la imagen entera, con bordes, en vez de recortarla para llenar.
fallback para lo que se pinta sin foto; por defecto, un icono.
rounded la deja redonda del todo.

Cuándo no

La foto de una persona: Avatar, que cae a las iniciales.
Las fotos de un producto para mirarlas en grande: Gallery o Carousel.
Comparar dos fotos, antes y después: ImageCompare.

Teclado: por defecto no es enfocable. Con onPress es un botón (Tab llega a él, Intro y Espacio lo pulsan) con pressLabel de nombre; si en cambio tiene que llevar a algún sitio, el enlace va alrededor.

Accesibilidad: alt es obligatorio: dice qué se ve en la imagen. Vacío (alt="") cuando la miniatura es decoración y el texto de al lado ya lo dice todo. Sin foto, el respaldo se lleva el alt (role="img"), o se oculta si el alt está vacío. La carga es diferida (loading="lazy") salvo con lazy={false}, para lo que se ve nada más abrir la página.

Aspecto fino: sin variables propias: se ajusta con las clases amset-thumbnail, amset-thumbnail--<ratio> (--1-1, --16-9…), amset-thumbnail--cover/--contain y amset-thumbnail--rounded.

Cómo se ve

Anillo Aurelia de plata con una circonita

Anillo Aurelia · Talla 14 · 49,90 €

<Thumbnail src={foto} alt="Anillo Aurelia de plata con una circonita" width="6rem" />
<Thumbnail alt="Colgante Luna, sin foto todavia" width="6rem" />
<Thumbnail src={cartel} alt="Cartel de la coleccion de otono" ratio="16:9" fit="contain" width="12rem" />

Props

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

Prop	Tipo	Para qué sirve
`alt`obligatoria	`string`	Que se ve en la imagen. Vacio a proposito (`alt=""`) cuando la miniatura es decoracion y el texto de al lado ya lo dice todo.
`caption`	`string`	Un texto corto sobre el borde de abajo: el nombre del fichero en una galeria.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`error`	`boolean`	Fallo al traerla: el icono de aviso en lugar de la imagen o del respaldo.
`fallback`	`ReactNode`	Lo que se pinta si no hay imagen o si falla al cargar.
`fit`	`ThumbnailFit`	`cover` recorta para llenar; `contain` deja la imagen entera con bordes.
`lazy`	`boolean`	Carga diferida. Encendida por defecto: una lista de 200 fotos no se carga entera.
`loading`	`boolean`	La imagen esta llegando: un esqueleto con brillo en su sitio, sin saltos.
`onPress`	`() => void`	Con esto la miniatura se pulsa: un boton transparente encima, con `pressLabel` (o `alt`) de nombre, que abre el visor, el zoom o lo que toque. Pide 44 px de alto en una pantalla tactil.
`pressLabel`	`string`	El nombre del boton de `onPress`: «Ver informe.png». Por defecto, `alt`.
`ratio`	`ThumbnailRatio`	—
`rounded`	`boolean`	—
`src`	`string`	—
`width`	`string`	—

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

En el banco de pruebas

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