LightBox

Playground

Verwende <LightBox /> um eine LightBox anzuzeigen und kombiniere <LightBoxTrigger /> und <Button /> um die LightBox in der Oberfläche aufrufbar zu machen.

import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox>
    <Image src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg" />
  </LightBox>
</LightBoxTrigger>

Mit ActionGroup

In der LightBox kann eine ActionGroup verwendet werden, diese richtet sich automatisch vertikal am Bild aus.

Mit Image Trigger

Als Trigger kann auch das Image selbst verwendet werden. Kombiniere dazu <Button /> mit <Image />.

Code anzeigen

FitScreen

Standardmäßig passt sich der Inhalt der LightBox an die Bildschirmgröße an. Wird die Property fitScreen auf false gesetzt, wird der Inhalt in seiner vollen Höhe dargestellt. Falls der verfügbare Platz nicht ausreicht, erscheint eine vertikale Scrollbar. Dieses Verhalten ist besonders hilfreich bei der Darstellung von Inhalten mit großer vertikaler Ausdehnung, wie z. B. mehrseitigen PDFs.

Mit Galerie

Innerhalb der Lightbox kann eine Gallery verwendet werden. Diese kann mit GalleryItems gefüllt werden, welche die Platzierung von Images und ActionGroups unterstützen.

Code anzeigen