UI: Dialog

Ein modaler Dialog mit Titel, Inhalt und einer Reihe von Aktionen. Importiere die Token-Datei einmal (@pithyx/ui/tokens.css) und umschließe die App mit UiProvider; siehe @pithyx/ui.

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

Schnittstellen

DialogProps

The props of Dialog: React Aria’s modal props plus title, content and actions.

Erweitert

• Omit<ModalOverlayProps, "className" | "children">

Eigenschaften

title

title: ReactNode;

The heading, also the dialog’s accessible name.

icon?

optional icon?: ReactNode;

An icon before the title.

tone?

optional tone?: "danger" | "default";

danger for a destructive question; default when left out.

role?

optional role?: "dialog" | "alertdialog";

alertdialog for a question that interrupts the user; dialog when left out.

size?

optional size?: "medium" | "default" | "large";

medium for longer forms such as a user with its rights; large for side-by-side content (the pool wizard).

children

children: ReactNode;

The content.

actions

actions: ReactNode;

The buttons at the bottom, usually a Button each.

Funktionen

Dialog()

function Dialog(props): Element;

A modal dialog with a title, content and a row of actions. Open it with isOpen and onOpenChange, or inside a React Aria DialogTrigger; Escape and a press outside close it unless isDismissable is false.

Parameter

Parameter	Typ	Beschreibung
props	DialogProps	React Aria’s modal overlay props plus title, content and actions.

Rückgabewert

Element

The modal overlay with the dialog.

Beispiel

<Dialog
  title="Delete 3 files?"
  tone="danger"
  role="alertdialog"
  isOpen={open}
  onOpenChange={setOpen}
  actions={
    <Button variant="danger" onPress={remove}>
      Delete
    </Button>
  }
>
  They go to the recycle bin.
</Dialog>