Menu

Le composant Menu fournit une fonctionnalité de menu déroulant flexible. Il exploite @radix-ui/react-dropdown-menu pour l’accessibilité et les fonctionnalités de personnalisation.

Utilisation

Le composant Menu nécessite un élément trigger pour basculer la visibilité du menu et peut accepter tout ReactNode comme ses enfants, qui inclut typiquement des composants MenuItem pour les options du menu.

Menu de base

Un exemple simple d’utilisation du composant Menu pour créer un menu déroulant.

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>
    );
}

Menu contrôlé

Vous pouvez contrôler la visibilité du composant Menu en passant les props open et onOpenChange.

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>
    );
}

Éléments de menu denses

Montrant comment rendre les composants MenuItem denses pour une apparence de menu plus compacte.

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>
    );
}