LightBox

Eine LightBox zeigt Bilder vergrößert und als Overlay mit abgedunkeltem Hintergrund an, um den Fokus auf den Inhalt zu legen.

GitHub Markdown

Grundlagen

Best Practices

Achte bei der Verwendung einer LightBox darauf, dass ...

Icons für die Aktionen (z. B. Löschen oder Herunterladen) klar und eindeutig gekennzeichnet sind, um Missverständnisse zu vermeiden.
für Bilder sinnvolle Alt-Texte gepflegt werden, um Screenreader-Unterstützung sicherzustellen.

Verwendung

Verwende eine LightBox, um ...

Inhalte wie Bilder vergrößert und aufmerksamkeitsstark darzustellen.
Usern eine Möglichkeit zu bieten, Inhalte zu betrachten, ohne die aktuelle Seite zu verlassen.

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://flow.mittwald.de/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 />.

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 LightBoxGallery verwendet werden. Diese kann mit LightBoxGalleryItems gefüllt werden, welche die Platzierung von Images und ActionGroups unterstützen.

Properties

Property	Type	Default	Description
`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.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-
`className`	`string`	-	The elements class name.