Props

Name	Type	Default	Description
isOpen	boolean	—	Whether the dialog is open. Bind with v-model:is-open.
media	LightboxMedia | readonly LightboxMedia[]	—	One item, or a gallery. An array shows previous, next, and a counter.
index	number	—	Controlled gallery index. Bind with v-model:index.
defaultIndex	number	0	Initial index when index is omitted.
hasZoom	boolean	false	Double-click, Enter, Space, +, and - zoom images. Arrow keys pan while zoomed.
hasAutoPlay	boolean	false	Start video playback when a video item is shown.

LightboxMedia is { src, alt, caption?, type? }. type is image or video, and defaults to image.

Events

Name	Payload	Description
update:isOpen	boolean	Close, Escape, or a backdrop click asks to change the open state.
update:index	number	Previous, next, or an arrow key while zoomed out asks for a new gallery index.

useLightbox

const { bindings, open, close, isOpen, index, getTriggerProps } = useLightbox({
  media,
  hasZoom: false,
  hasAutoPlay: false,
})

bindings is the set of props and update listeners for v-bind. open(index) sets the index and opens the dialog. getTriggerProps(index) returns role="button", tabindex="0", aria-haspopup="dialog", and keyboard activation for a custom trigger.

Theme

The dialog class is astryx-lightbox. Caption text uses the large type, on-dark, a max width of 600px, and padding of spacing 2 on the block start and spacing 3 on the inline sides. Close and navigation sit at spacing 3 from the frame.