LightBox

Eine LightBox zeigt Bilder vergrößert als Overlay mit abgedunkeltem Hintergrund.

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

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

Best Practices

Kennzeichne die Aktions-Icons‍ klar und eindeutig. So vermeidest du Missverständnisse, etwa bei Löschen oder Herunterladen.
Pflege sinnvolle Alt-Texte für die Bilder. Das sichert die Screenreader-Unterstützung.

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.

Galerie

Innerhalb der LightBox kann eine LightBoxGallery verwendet werden. Diese kann mit LightBoxGalleryItems gefüllt werden, welche die Platzierung von Images‍ und ActionGroups‍ unterstützen.

Kombiniere mit …

ActionGroup

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

Image

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

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`string`	-	The elements class name.
`controller`	`OverlayController`	-	An overlay controller to control the light box state.
`fitScreen`	`boolean`	true	Whether content can be displayed larger than the available space in the screen.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Components

Integrations