ImageLightbox
Vollbild-Lightbox zur Anzeige von Bildern mit Slider-Navigation, Tastatursteuerung und Overlay-Schließen. Wird programmatisch über OpenAsync geöffnet.
Einzelbild
Lightbox mit einem einzigen Bild – keine Navigationspfeile.Bildergalerie (Slider)
Lightbox mit mehreren Bildern – Navigation per Pfeiltasten oder Klick auf die Pfeilbuttons.Per Index öffnen
Direkt das dritte Bild der Galerie öffnen.SKILL.md – Imagelightbox
--- name: ImageLightbox description: Onesown Blazor Komponente ImageLightbox (Viewer). Verwende diesen Skill wenn du die ImageLightbox-Komponente verwenden, konfigurieren oder debuggen moechtest. --- # ImageLightbox **Namespace:** `Onesown.Blazor.Components` **Kategorie:** Viewer **Basisklasse:** `OoComponentBase` Vollbild-Lightbox zur Anzeige von einem oder mehreren Bildern mit Slider-Navigation, Tastatursteuerung und dediziertem Close-Button. Wird programmatisch über oder geöffnet. **Live-Demo:** https://components.schini.com/demo/imagelightbox ## Parameter | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Images`` | ``List<string>`` | ``new()`` | Liste aller Bild-URLs die in der Lightbox navigierbar angezeigt werden. Bei einem Eintrag entfallen Pfeile und Zähler. | ## Geerbte Parameter (OoComponentBase) Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht. | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Size`` | ``string`` | | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. | ## Hinweise - Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben - Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben - Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht - Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl) - Öffnen per URL: await lightboxRef.OpenAsync(imageUrl) – springt zum passenden Bild in der Liste - Öffnen per Index: await lightboxRef.OpenAsync(0) öffnet das erste Bild direkt - Bild-URLs übergeben: Images="@_bildListe" als List<string> (relative oder absolute URLs) - Schließen: Close-Button (×) rechts oben oder Escape-Taste - Navigation: Pfeilbuttons links/rechts oder Tastatur ArrowLeft/ArrowRight (nur bei mehreren Bildern) - Komponentenreferenz: @ref="_lightbox" am Element, dann _lightbox.OpenAsync(...) aufrufen