componentes / gallery

Gallery

Cuadrícula responsiva de miniaturas que abre un visor a pantalla completa.

Cómo usar

Pasa `items` (`src`, `alt`, `thumbnail` y `caption` opcionales). Cada miniatura es un botón que abre el `Lightbox` en esa imagen; el foco vuelve a la miniatura al cerrar. Controla la cuadrícula con `columns`, `gap` y `aspectRatio`, o desactiva el visor con `lightbox={false}` y usa `onItemClick`.

preview

Gallery.tsx

import { Gallery } from "vaiperui";
 
<Gallery
  aria-label="Fotos del viaje"
  columns={3}
  items={[
    { src: "/photos/road.jpg", alt: "Mountain road", caption: "Road" },
    { src: "/photos/sky.jpg", alt: "Starry sky", thumbnail: "/photos/sky-sm.jpg" },
  ]}
/>

Columnas

preview

columnas.tsx

<Gallery columns={2} items={items} />
<Gallery columns={4} aspectRatio="1 / 1" items={items} />

Radius y espaciado

preview

radius.tsx

<Gallery radius="none" gap={2} items={items} />
<Gallery radius="lg" gap={16} items={items} />

Sin visor

preview

sin-visor.tsx

<Gallery lightbox={false} onItemClick={(item, i) => select(i)} items={items} />

Props

Prop	Valores	Predeterminado	Descripción
items	{ src, alt, thumbnail?, caption? }[]	—	Imágenes. `thumbnail` va en la cuadrícula, `src` en el visor
columns	number	3	Columnas de la cuadrícula
gap	number	8	Espacio entre miniaturas, en px
aspectRatio	string	4 / 3	Proporción CSS de cada miniatura
lightbox	boolean	true	Abrir el visor al hacer clic
onItemClick	(item, index) => void	ninguno	Llamado en cada clic en una miniatura
openLabel	(item, index) => string	Open image N: alt	Nombre accesible de cada botón de miniatura
lightboxProps	{ label, closeLabel, previousLabel, nextLabel, counterLabel }	ninguno	Textos del visor
radius	none \| sm \| md \| lg \| full	md	Redondeo de las miniaturas
animation	none \| smooth \| fast \| bounce	smooth	Transición del zoom al pasar el ratón
aria-label	string	ninguno	Describe la lista de imágenes

Accesibilidad

Los elementos forman una lista (`<ul aria-label>`) y cada miniatura es un `<button>` real, accesible con Tab y activado con Enter o Espacio.
Cada botón se nombra con `openLabel(item, index)`, que por defecto es `Open image N: <alt>`.
`alt` es obligatorio en cada elemento y se usa en la miniatura y en el visor.
El pie de foto de hover también se muestra cuando el botón tiene el foco del teclado.
Con `lightbox`, el clic abre el `Lightbox` (un diálogo modal); sin él, los botones solo llaman a `onItemClick`.

Teclado

Tecla	Acción
Tab	Recorre las miniaturas
Enter / Space	Abre la imagen en el visor

Ten en cuenta

Escribe un `alt` real para cada imagen (descríbela); el componente no lo valida.
Pasa `aria-label` para la lista y traduce `openLabel` al idioma de la página.