Modal

Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite an, wodurch der Nutzer sich voll auf den Inhalt des Modals konzentrieren kann.GitHub

Playground

Verwende <Modal />, um ein Modal darzustellen. Da ein Modal in der Regel nur durch eine Aktion des Nutzers erscheint, wird ein <ModalTrigger /> in Kombination z. B. einem <Button /> benötigt.

import {
  Action,
  ActionGroup,
  Button,
  Content,
  Heading,
  Label,
  Modal,
  ModalTrigger,
  Section,
  Text,
  TextField,
} from "@mittwald/flow-react-components";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";

<ModalTrigger>
  <Button>Modal öffnen</Button>
  <Modal>
    <Heading>Organisation anlegen</Heading>
    <Content>
      <Section>
        <Text>
          Eine Organisation kannst du dir wie ein
          Unternehmen vorstellen. An diesem Ort verwaltest
          du deine Mitarbeiter, Zahlungsmodalitäten und
          kannst deine Rechnungen einsehen.
        </Text>
        <TextField isRequired>
          <Label>Organisationsname</Label>
        </TextField>
      </Section>
    </Content>
    <ActionGroup>
      <Action closeOverlay="Modal">
        <Action action={sleepLong}>
          <Button color="accent">
            Organisation anlegen
          </Button>
        </Action>
        <Button variant="soft" color="secondary">
          Abbrechen
        </Button>
      </Action>
    </ActionGroup>
  </Modal>
</ModalTrigger>

Variants

OffCanvas

Neben der klassischen Darstellung lässt sich das Modal auch als OffCanvas öffnen.

Sizes

Das Modal gibt es in zwei Standardgrößen: S und M. Beide Größen sind sowohl als klassisches Modal als auch in der OffCanvas-Variante verfügbar. In der OffCanvas-Darstellung kannst du außerdem eine individuelle Größe je nach Anwendungsfall festlegen.

Size S: Ein Modal in der Size S (Breite 660 px) wird zum Beispiel für einfache Abfragen, ob etwas gelöscht werden soll, verwendet.

Size M: Ein Modal in der Size M (Breite 900 px) wird für komplexere Dialoge (z. B. Erstellungs-Prozesse mit mehreren Eingabefeldern) verwendet.

Kombiniere mit ...

Controller

Neben dem <ModalTrigger /> kann das Modal auch über einen Controller gesteuert werden.

Dieser Controller steht auch in Modals zur Verfügung, die über den ModalTrigger geöffnet wurden.

Form

Verwende eine Form innerhalb eines Modals wie im folgenden Beispiel.

Components