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/04-components/actions/action/examples/lib";

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

Pending

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

Feedback

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

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.

Verschachtelte Actions

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

In MenuItems

Actions können auch um MenuItems gelegt werden, um deren State zu steuern.

Components