PaackEng / paack-ui / 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


type Menu msg

The Menu msg type is used for describing the component for later rendering.

menu : msg -> List (MenuItem msg) -> UI.Button.Button msg -> Menu msg

Defines all the required properties for creating a dropdown menu.

Button.cmd ToggleMenu Button.primary
    |> Menu.menu ToggleMenu
        [ "Download"
            |> Menu.item Download Icon.download
        , "Delete"
            |> Menu.item Delete Icon.delete
            |> Menu.itemWithDangerTone
        ]
    |> Menu.renderElement renderConfig


type MenuItem msg

The MenuItem is required when assembling the list of menu entries.

item : msg -> Maybe (String -> UI.Icon.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


type OpenDirection

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

openAbove : OpenDirection

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

openBelow : OpenDirection

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

itemWithDangerTone : MenuItem msg -> MenuItem msg

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

withOpenDirection : OpenDirection -> Menu msg -> Menu msg

Sets menu direction.

Menu.withOpenDirection Menu.above someMenu

Interactive

setVisible : Basics.Bool -> Menu msg -> Menu msg

Show or hide the menu overlay.

Menu.setVisible True someMenu

Rendering

renderElement : UI.RenderConfig.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.