mittwald Flow Logo

Components

LightBox

Die LightBox dient dazu einzelne Elemente, wie Bilder, in einem Overlay anzuzeigen.GitHub

Playground

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

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

Mit ActionGroup

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

<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>

FitScreen

Im Default wird der Inhalt durch die Größe des Screens begrenzt. Wird das Property fitScreen auf false gesetzt, wird der Inhalt in seiner vollen Höhe dargestellt, und wenn nötig mit einer Scrollbar versehen. Das kann vorallem bei der Darstellung höherer Elemente, wie z.B. mehrseitiger PDFs hilfreich sein.

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

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