Menu

Il componente Menu fornisce una funzionalità flessibile di menu a discesa. Sfrutta @radix-ui/react-dropdown-menu per funzionalità di accessibilità e personalizzazione. Il componente Menu e il suo sottocomponente MenuItem possono essere facilmente stilizzati e incorporati nella tua interfaccia per varie esigenze come menu di navigazione, menu opzioni e altro.

Utilizzo

Il componente Menu richiede un elemento trigger per alternare la visibilità del menu e può accettare qualsiasi ReactNode come figli, che tipicamente include componenti MenuItem per le opzioni del menu.

Menu di base

Un esempio semplice di utilizzo del componente Menu per creare un menu a discesa.

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 controllato

Puoi controllare la visibilità del componente Menu passando le prop 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>
    );
}

Elementi menu compatti

Mostra come rendere i componenti MenuItem compatti per un aspetto del menu più condensato.

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