Todos los componentes (204)

Galería

Comercio · Gallery · .amset-gallery

Qué es y cuándo usarlo

El visor de fotos de una ficha de producto: la foto grande y, debajo, la tira de miniaturas para elegir otra.

Cuándo usarlo

Las fotos de un producto, de las que se mira una cada vez.
thumbnails={false} cuando no hay sitio para la tira: quedan las flechas y el contador (arrows y counter los quitan también).
ratio fija la forma del hueco (1:1, 4:3 o 16:9) para que la página no salte al cargar; free respeta la foto.
Controlada con index y onChange, por ejemplo para cambiar de foto al elegir un color; sin controlar, initialIndex es la de salida.

Cuándo no

Una tira de cosas que se ven varias a la vez (tarjetas, novedades): Carousel.
Una sola foto: Thumbnail.
Dos fotos del mismo encuadre para comparar: ImageCompare.

Teclado: la tira es una lista de pestañas: Tab entra por la miniatura elegida y las flechas cambian de foto. El siguiente Tab va a la foto grande y después a los botones de foto anterior y siguiente, que se apagan en los extremos.

Accesibilidad: cada miniatura es una pestaña que se llama como el alt de su foto (la imagen pequeña es decorativa) y la foto grande es su panel: la relación entre las dos está en el HTML, no solo dibujada. El alt de cada foto es obligatorio. El contador («2 de 4») es un role="status", así que el cambio se anuncia. Sin miniaturas, es un grupo que se llama como el label.

Aspecto fino: variables CSS --amset-gallery-*: -arrow, -arrow-icon, -counter, -gap, -radius, -thumbnail. El tamaño mueve la flecha, su icono, la miniatura y el contador.

Cómo se ve

1 de 2

<Gallery
  label="Fotos del producto"
  images={[
    { key: '1', src: '/frente.jpg', alt: 'Vista de frente' },
    { key: '2', src: '/lado.jpg', alt: 'Vista de lado' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`images`obligatoria	`readonly GalleryImage[]`	—
`label`obligatoria	`string`	De que son las fotos: "Fotos del anillo Aurelia".
`arrows`	`boolean`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`counter`	`boolean`	—
`index`	`number`	—
`initialIndex`	`number`	—
`onChange`	`(index: number) => void`	—
`ratio`	`GalleryRatio`	Forma del hueco de la foto grande. `free` respeta la imagen.
`size`	`"sm" \| "md" \| "lg"`	—
`thumbnails`	`boolean`	Tira de miniaturas debajo. Sin ella quedan las flechas y el contador.

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-gallery-gap`	`var(--amset-space-2)`
`--amset-gallery-radius`	`var(--amset-radius-lg)`
`--amset-gallery-arrow`	`2.25rem`
`--amset-gallery-arrow-icon`	`1.125rem`
`--amset-gallery-counter`	`var(--amset-text-xs)`
`--amset-gallery-thumbnail`	`4rem`

Cómo se cambia

.amset-gallery {
  --amset-gallery-gap: ...;
  --amset-gallery-radius: ...;
}

En el banco de pruebas

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