PaackEng/paack-ui/7.21.0

NOTE: the latest version is 7.23.0

UI.Menu

The UI.Menu is a component for rendering dropdown menus.

Following Elm-UI standards, this component is accessible.

A menu can be created and rendered as in the following pipeline:

Button.cmd ToggleMenu Button.primary
    |> Menu.menu ToggleMenu
        [ Menu.item Download
            (Just Icon.download)
            "Download"
        ]
    |> Menu.renderElement renderConfig

Building

item : msg -> Maybe (String -> Icon) -> String -> MenuItem msg

Constructs a MenuItem.

Button.cmd ToggleMenu Button.primary
    |> Menu.menu ToggleMenu
        [ Menu.item Download
            (Just Icon.download)
            "Download"
        ]
    |> Menu.renderElement renderConfig

Style

The OpenDirection is used to determine the direction that the menu will open.

Renders the menu above the button, mostly used on menus that appear on the bottom of the screen.

Renders the menu bellow the button, this is the default menu direction.

Sets the color of a MenuItem.

Button.cmd ToggleMenu Button.primary
    |> Menu.menu ToggleMenu
        [ "Delete"
            |> Menu.item Delete (Just Icon.delete)
            |> Menu.itemWithDangerTone
        ]
    |> Menu.renderElement renderConfig

Sets menu direction.

Menu.withOpenDirection Menu.above someMenu

Interactive

setVisible : Bool -> Menu msg -> Menu msg

Show or hide the menu overlay.

Menu.setVisible True someMenu

Rendering

renderElement : RenderConfig -> Menu msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.