Menú (Menu)

El componente Menu (Menú) proporciona una funcionalidad de menú desplegable flexible. Aprovecha @radix-ui/react-dropdown-menu para las características de accesibilidad y personalización. El componente Menu y su subcomponente, MenuItem, se pueden estilizar fácilmente e incorporar a tu interfaz de usuario para diversas necesidades, como menús de navegación, menús de opciones y más.

Uso

El componente Menu requiere un elemento trigger (disparador) para alternar la visibilidad del menú y puede aceptar cualquier ReactNode como sus hijos (children), que normalmente incluye componentes MenuItem para las opciones del menú.

Menú básico

Un ejemplo sencillo de uso del componente Menu para crear un menú desplegable.

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

Menú controlado

Puedes controlar la visibilidad del componente Menu pasando las props open (abierto) y onOpenChange (al cambiar apertura).

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

Elementos de menú compactos (Dense Menu Items)

Mostrando cómo hacer que los componentes MenuItem sean compactos (dense) para una apariencia de menú más comprimida.

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