Bild-Zoom (Lightbox) — UI-Kit-Galerie

Beispiele

Bild mit Zoom (klicken → Vollbild)

Getrennte Vorschau/Vollbild-Datei

Unsichere Adresse → Platzhalter

Eigenschaften

Prop	Typ	Default	Builder-Label
src *	string	—	Bild-Adresse
alt *	string	—	Alternativtext
caption	string	""	Bildunterschrift (auch im Overlay)
ratio	string: auto \| 16:9 \| 4:3 \| 1:1	"auto"	Seitenverhältnis der Vorschau
zoomSrc	string	""	Großformat-Adresse (leer = src)

* Pflicht-Prop

Events & Slots

Events: ⚡ open⚡ close — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--image-zoom-max-width`	`92vw`
`--image-zoom-max-height`	`85vh`
`--image-zoom-backdrop`	`var(--color-surface-backdrop)`

Genutzte Design-Tokens

color.action.secondarycolor.surface.backdropcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.inversecolor.text.mutedelevation.overlayelevation.raisedfont.family.defaultlayer.modalradius.controlradius.fullradius.surfacesize.10size.2size.24size.32size.4size.6size.8text.sm

LLM-Notizen

component.image-zoom

Klickbares Bild mit Vollbild-Overlay (Lightbox). Vorschau ist ui.image; das Overlay schließt über ✕, Backdrop, Bild-Klick und Escape, mit Scroll-Lock. Ohne JS bleibt es ein normales Bild.

Wann nutzen

Galerie-/Detailbilder, Screenshots in Doku, Produktfotos ohne eigene Galerie. Für mehrere Bilder mit Wechsel component.product-gallery.

Wichtige Props

src/alt (Pflicht), caption (erscheint auch im Overlay), ratio der Vorschau.
zoomSrc: getrennte Großformat-Datei (leer = src).
Stellschrauben: --image-zoom-max-width/-height, --image-zoom-backdrop.

Beispiel-Node


{
  "definition": "component.image-zoom",
  "props": { "src": "/storage/foto.jpg", "alt": "Messehalle", "caption": "Stand 4b", "ratio": "16:9" }
}