co-lightbox
Visor de imágenes a pantalla completa con scrim oscuro, zoom (rueda, botones o doble clic), arrastre para desplazar y carrusel cuando hay más de una imagen. Se controla como co-modal: el host es dueño de open y reacciona a coClose. Las imágenes se pasan como un array JSON en images.
Ver código
<co-lightbox locale="es" images='[{"src":"https://picsum.photos/seed/a/1200/800","alt":"Imagen 1"},{"src":"https://picsum.photos/seed/b/900/1200","alt":"Imagen 2"}]'></co-lightbox>Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|---|---|---|---|
images | images | string | '[]' | JSON array of {@link LightboxImage} (controlled by the host). |
locale | locale | string | undefined | — | BCP-47 locale for the built-in aria strings (es/en/pt). |
open | open | boolean | false | Whether the viewer is visible. |
startIndex | start-index | number | 0 | Index shown when the viewer opens. |
Eventos
| Evento | Detail | Bubbles | Cancelable | Descripción |
|---|---|---|---|---|
coChange | number | — | ✓ | Emitted when the active image changes (prev/next/keyboard). |
coClose | void | — | ✓ | Emitted when the viewer requests to close (backdrop, X, Escape). |
Slots
Este componente no expone slots.
CSS Parts
| Part | Descripción |
|---|---|
::part(close) | The close button |
::part(counter) | The "i / n" indicator |
::part(image) | The active image element |
::part(next) | Next-image arrow button |
::part(overlay) | Fullscreen scrim container |
::part(prev) | Previous-image arrow button |
::part(toolbar) | Top bar (caption + zoom controls + actions) |
CSS Custom Properties
Este componente no expone CSS custom properties.