Modal

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/04-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 closeModal>
        <Action onAction={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.

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.

Ungespeicherte Änderungen

Eingaben in einem Modal gehen verloren, wenn es geschlossen wird. Damit das nicht unbemerkt passiert, kann zuvor ein Bestätigungs-Dialog erscheinen: bei Escape und bei einem Klick außerhalb des Modals. Aktionen in der <ActionGroup /> und der Close-Button in der Überschrift schließen das Modal dagegen sofort – hier verwirft der Nutzer seine Änderungen bewusst.

Enthält das Modal eine Form (React Hook Form), ist das der Standard: Sobald die Form dirty ist, wird das Schließen bestätigt, nach einem erfolgreichen Submit oder einem form.reset() nicht mehr. Voraussetzung ist das Flag requireCloseModalConfirmationOnUnsavedChanges in der Anwendung.

Ohne Form – oder wenn du selbst entscheiden willst, wann es etwas zu verlieren gibt – setzt du confirmOnClose:

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.