UI: Menu

Menu mit Einträgen, Trennlinien, Popover und Auslöser, dazu useDeliberatePress für destruktive Einträge. 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

MenuItemProps

The props of MenuItem.

Erweitert

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

Eigenschaften

icon?

optional icon?: ReactNode;

An icon before the label.

children

children: ReactNode;

The label; a string is also the text for type-ahead.

tone?

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

danger for a destructive entry; default when left out.

shortcut?

optional shortcut?: string;

Keyboard shortcut shown at the end of the item.

Variablen

MenuTrigger

const MenuTrigger: (props) => Element | null = AriaMenuTrigger;

Opens a menu from its trigger: the first child is the trigger (a Button or IconButton), the second a MenuPopover with the Menu. It is React Aria’s MenuTrigger; its props (isOpen, onOpenChange, trigger) are documented there.

Parameter

Parameter	Typ	Beschreibung
props	MenuTriggerProps	React Aria’s menu trigger props and the two children.

Rückgabewert

Element | null

The trigger with its menu.

Funktionen

MenuPopover()

function MenuPopover(props): Element;

The popover a Menu opens in, next to its trigger inside a MenuTrigger.

Parameter

Parameter	Typ	Beschreibung
props	Omit<PopoverProps, "className"> & object	React Aria’s popover props (placement, offset).

Rückgabewert

Element

The popover.

---

Menu()

function Menu<T>(props): Element;

A menu of MenuItems and MenuSeparators, with keyboard and touch handling.

Typenparameter

Typenparameter
T extends object

Parameter

Parameter	Typ	Beschreibung
props	Omit<MenuProps<T>, "className"> & object	React Aria’s menu props (onAction, selectionMode, items).

Rückgabewert

Element

The menu.

Beispiel

<MenuTrigger>
  <IconButton label="More">
    <IconDots size={18} />
  </IconButton>
  <MenuPopover>
    <Menu onAction={(id) => run(String(id))}>
      <MenuItem id="rename" shortcut="F2">
        Rename
      </MenuItem>
      <MenuSeparator />
      <MenuItem id="delete" tone="danger">
        Delete
      </MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>

---

MenuItem()

function MenuItem(props): Element;

One entry of a menu, with an optional icon and key hint. It shows a check mark in a menu with a selectionMode and a chevron when it opens a submenu.

Parameter

Parameter	Typ	Beschreibung
props	MenuItemProps	React Aria’s menu item props (id, onAction, isDisabled, textValue) plus icon, tone and shortcut.

Rückgabewert

Element

The menu item.

---

MenuSeparator()

function MenuSeparator(): Element;

A line between groups of menu entries.

Rückgabewert

Element

The separator.

---

useDeliberatePress()

function useDeliberatePress(): object;

React Aria runs a menu item’s action when a mouse press that began elsewhere, on the menu’s trigger, is released over the item (press, drag, release). A menu that opens under the pointer can then act on a plain click of its trigger. Destructive items take their action only from a press that started on them: spread pressProps on the item and ask confirm() in the menu’s action handler.

Rückgabewert

The props for the item and the check for the action handler.

pressProps

pressProps: object;

Spread on the destructive item.

pressProps.onPressStart

onPressStart: () => void;

Arms the item when a press starts on it.

Rückgabewert

void

confirm

confirm: () => boolean;

Whether the action comes from a press that started on the item; disarms it.

Rückgabewert

boolean

Beispiel

const deliberate = useDeliberatePress();
<Menu onAction={(id) => id === 'delete' && deliberate.confirm() && remove()}>
  <MenuItem id="delete" tone="danger" {...deliberate.pressProps}>
    Delete
  </MenuItem>
</Menu>;