Menü (Menu)

Die Menu-Komponente bietet eine flexible Dropdown-Menü-Funktionalität. Sie nutzt @radix-ui/react-dropdown-menu für Barrierefreiheit und Anpassungsfunktionen. Die Menu-Komponente und ihre Unterkomponente MenuItem können leicht gestylt und in Ihre Benutzeroberfläche für verschiedene Anforderungen wie Navigationsmenüs, Optionsmenüs und mehr integriert werden.

Verwendung

Die Menu-Komponente erfordert ein trigger-Element, um die Sichtbarkeit des Menüs umzuschalten, und kann jeden ReactNode als untergeordnete Elemente akzeptieren (typischerweise MenuItem-Komponenten für die Menüoptionen).

Einfaches Menü

Ein einfaches Beispiel, das zeigt, wie die Menu-Komponente zum Erstellen eines Dropdown-Menüs verwendet wird.

import React from "react";
import { Button, Menu, MenuItem } from "@firecms/ui";

export default function MenuBasicDemo() {
    return (
        <Menu trigger={<Button>Open Menu</Button>}>
            <MenuItem onClick={() => alert("Menu Item 1 clicked")}>Menu Item 1</MenuItem>
            <MenuItem onClick={() => alert("Menu Item 2 clicked")}>Menu Item 2</MenuItem>
            <MenuItem onClick={() => alert("Menu Item 3 clicked")}>Menu Item 3</MenuItem>
        </Menu>
    );
}

Gesteuertes Menü

Sie können die Sichtbarkeit der Menu-Komponente steuern, indem Sie die Props open und onOpenChange übergeben.

import React from "react";
import { Button, Menu, MenuItem } from "@firecms/ui";

export default function MenuCustomTriggerDemo() {

    const [open, setOpen] = React.useState(false);

    return (
        <Menu
            onOpenChange={setOpen}
            open={open}
            trigger={
                <Button onClick={() => setOpen(true)}>Click me</Button>
            }>
            <MenuItem onClick={() => alert("Action 1")}>Action 1</MenuItem>
            <MenuItem onClick={() => alert("Action 2")}>Action 2</MenuItem>
            <MenuItem onClick={() => alert("Action 3")}>Action 3</MenuItem>
        </Menu>
    );
}

Dichte Menüelemente

Zeigt, wie die MenuItem-Komponenten für ein kompakteres Menü-Erscheinungsbild dichter (dense) gemacht werden.

import React from "react";
import { Button, Menu, MenuItem } from "@firecms/ui";

export default function MenuDenseItemsDemo() {
    return (
        <Menu trigger={<Button>Dense Menu</Button>}>
            <MenuItem dense onClick={() => alert("Dense Item 1 clicked")}>Dense Item 1</MenuItem>
            <MenuItem dense onClick={() => alert("Dense Item 2 clicked")}>Dense Item 2</MenuItem>
            <MenuItem dense onClick={() => alert("Dense Item 3 clicked")}>Dense Item 3</MenuItem>
        </Menu>
    );
}