Skip to content

ComponentsLightbox

Components

Lightbox

Image preview: a 62.5% black layer, the image up to 640 × viewport − 64, Close beside it, a View Transition morph from the thumbnail.

Without a thumbnail

Opened through v-model only (no LightboxTrigger): the layer crossfades (180ms) instead of morphing. A thumbnail scrolled out of view on close makes the preview fade out in place.

v-model:open

Actions and nesting

The #actions slot stacks extra buttons under Close (8px apart). Opened from a dialog, the dialog behind gets the nested veil and blur.

#actions
From a dialog