ActionGroup

Grundlagen

Die ActionGroup dient dazu, mehrere Actions sinnvoll zu gruppieren und in eine konsistente Reihenfolge zu bringen. Sie wird häufig im Section Header, im Header einer List oder im Footer eines Modals verwendet. Sie kann aber auch eigenständig im Content eingesetzt werden.

Best Practices

Achte bei der Verwendung einer ActionGroup darauf, dass ...

• die innerhalb der ActionGroup eingesetzten Buttons die Richtlinien aus der Button Guideline einhalten.
• bei mehreren Buttons nur ein Button als Hauptaktion hervorgehoben wird.
• sie häufig in anderen Components wie Section, List oder Modal zum Einsatz kommt.

Verwendung

Verwende eine ActionGroup, um ...

• mehrere zusammengehörige Actions in eine sinnvolle Reihenfolge zu bringen.
• eine Hauptaktion der Section, des Modals oder der Liste hervorzuheben.

Playground

Verwende <ActionGroup />, um eine ActionGroup darzustellen.

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

<ActionGroup>
  <Button color="accent">Organisation erstellen</Button>
  <Button color="secondary" variant="soft">
    Abbrechen
  </Button>
</ActionGroup>

Slots

Die Actions werden von der ActionGroup automatisch in die Slots primary, secondary und abort sortiert. So werden Buttons mit der Color Primary (Standard), Accent und Danger automatisch dem Slot primary zugeordnet, der am Ende der ActionGroup positioniert ist.

Reihenfolge beibehalten

Mit preserveOrder verzichtet die ActionGroup auf die automatische Sortierung in die Slots primary, secondary und abort. Die Actions bleiben in der Reihenfolge, in der sie im Code stehen.

Größe

Mit size werden die Buttons und Links in der ActionGroup einheitlich dimensioniert.

Kombiniere mit ...

Link

Reihenfolge der Buttons

Es kann vorkommen, dass sich durch Rerendering die Reihenfolge der Buttons ändert, wenn z. B. Inhalte nachgeladen werden. Um das zu verhindern, sollte um diese Inhalte ein Suspense gelegt werden.

Properties