Bild-Zoom (Lightbox) — component.image-zoom
Klickbares Bild öffnet ein Vollbild-Overlay (Backdrop, Escape/Klick schließt, Scroll-Lock) — ohne JS bleibt es ein normales Bild
Componentv1.0.0Inhaltweb.documentweb.applicationdesktop.shell
Beispiele
Bild mit Zoom (klicken → Vollbild)
Getrennte Vorschau/Vollbild-Datei
Unsichere Adresse → Platzhalter
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
src * | string | — |
alt * | string | — |
caption | string | "" |
ratio | string: auto | 16:9 | 4:3 | 1:1 | "auto" |
zoomSrc | string | "" |
Events & Slots
Events: open, close
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--image-zoom-max-width | 92vw |
--image-zoom-max-height | 85vh |
--image-zoom-backdrop | var(--color-surface-backdrop) |
Genutzte Design-Tokens
color.action.secondary color.surface.backdrop color.surface.overlay color.surface.sunken color.text.default color.text.inverse color.text.muted elevation.overlay elevation.raised font.family.default layer.modal radius.control radius.full radius.surface size.10 size.2 size.24 size.32 size.4 size.6 size.8 text.sm