UI: ContextMenuPopover

Das Popover eines Kontextmenüs, geöffnet an einem Punkt des Viewports. 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.

Funktionen

ContextMenuPopover()

function ContextMenuPopover(props): Element;

The popover of a context menu, opened at a point of the viewport. A second right-click while it is open moves the menu there, or to whichever menu the element at that point opens.

Parameter

Parameter	Typ	Beschreibung
props	{ x: number; y: number; onClose: () => void; children: ReactNode; }	The point and the menu.
props.x	number	Horizontal position in the viewport, in CSS pixels (the event’s clientX).
props.y	number	Vertical position in the viewport, in CSS pixels (the event’s clientY).
props.onClose	() => void	Called when the menu should close: Escape, a press outside, a picked entry.
props.children	ReactNode	The menu, usually a Menu.

Rückgabewert

Element

The popover, open until onClose removes it.

Beispiel

{
  menuAt && (
    <ContextMenuPopover x={menuAt.x} y={menuAt.y} onClose={() => setMenuAt(null)}>
      <Menu onAction={run}>
        <MenuItem id="rename">Rename</MenuItem>
      </Menu>
    </ContextMenuPopover>
  );
}