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
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
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
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
setVisible : Basics.Bool -> Menu msg -> Menu msg
Show or hide the menu overlay.
Menu.setVisible True someMenu
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.