mittwald Flow Logo

Components

Action

Die Action wird um einen Button gelegt, um beispielsweise visuelles Feedback bei asynchronen Aktionen zu ermöglichen oder ein Bestätigungsmodal auszulösen.GitHub

Playground

Lege <Action />, um einen Button, um die States des Buttons zu steuern.

import {
  Action,
  Button,
} from "@mittwald/flow-react-components";
import { sleep } from "@/content/03-components/actions/action/examples/lib";

<Action action={sleep}>
  <Button color="accent">Speichern</Button>
</Action>

Pending

Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert, wird der Pending State angezeigt.

import {
  Action,
  Button,
} from "@mittwald/flow-react-components";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";

<Action action={sleepLong}>
  <Button color="accent">Speichern</Button>
</Action>

Feedback

Wenn ein visuelles Feedback nach einer Userinteraktion angezeigt werden soll, kann das Property showFeedback genutzt werden.

import {
  Action,
  Button,
} from "@mittwald/flow-react-components";

<Action
  action={() => {
    // do nothing
  }}
  showFeedback
>
  <Button color="accent">Speichern</Button>
</Action>

Bestätigungsmodal

Um User vor unbeabsichtigten Aktionen zu schützen, kann ein Bestätigungsmodal angezeigt werden. Dafür muss innerhalb der Action ein Modal mit dem Attribut slot="actionConfirm" platziert werden.

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

<Action action={sleepLong}>
  <Modal slot="actionConfirm">
    <Heading>Projekt löschen</Heading>
    <Content>
      Wenn das Projekt &quot;Test&quot; einmal gelöscht ist,
      kann es nicht wiederhergestellt werden.
    </Content>
    <ActionGroup>
      <Button color="danger">Löschen</Button>
      <Button color="secondary" variant="soft">
        Abbrechen
      </Button>
    </ActionGroup>
  </Modal>
  <Button color="danger">Projekt löschen</Button>
</Action>

Verschachtelte Actions

Wenn mehrere Aktionen auf eine Userinteraktion folgen, können Actions auch ineinander verschachtelt werden.

import {
  Action,
  Button,
} from "@mittwald/flow-react-components";

<Action action={() => console.log("close modal")}>
  <Action action={() => console.log("save")}>
    <Button color="accent">Speichern</Button>
  </Action>
</Action>

Overview