mittwald Flow Logo

Components

LightBox

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

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.

import {
  ActionGroup,
  Button,
  IconDelete,
  IconDownload,
  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" />
    <ActionGroup>
      <Button>
        <IconDownload />
      </Button>
      <Button>
        <IconDelete />
      </Button>
    </ActionGroup>
  </LightBox>
</LightBoxTrigger>

Mit Image Trigger

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

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

<LightBoxTrigger>
  <Button>
    <Image
      width={100}
      withBorder
      alt="mittwald"
      src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
    />
  </Button>
  <LightBox>
    <Image
      alt="mittwald"
      src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
    />
  </LightBox>
</LightBoxTrigger>

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.

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

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

Overview