Menu

O componente Menu fornece uma funcionalidade flexível de menu suspenso. Utiliza o @radix-ui/react-dropdown-menu para recursos de acessibilidade e personalização. O componente Menu e seu subcomponente, MenuItem, podem ser facilmente estilizados e incorporados à sua interface para várias necessidades como menus de navegação, menus de opções e mais.

Uso

O componente Menu requer um elemento trigger para alternar a visibilidade do menu e pode aceitar qualquer ReactNode como filhos, que tipicamente inclui componentes MenuItem para as opções do menu.

Menu básico

Um exemplo simples de uso do componente Menu para criar um menu suspenso.

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 controlado

Você pode controlar a visibilidade do componente Menu passando as props open e 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>
    );
}

Itens de menu compactos

Mostrando como tornar os componentes MenuItem compactos para uma aparência de menu mais condensada.

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