A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
A menu is usually tied to an element that opens it, such as a button. For
positioning, wrap the button and the menu within an element that sets the
surfaceAnchor
attribute. The menu's items are simply a
list.
import Material.Button as Button
import Material.List as List
import Material.ListItem as ListItem
import Material.Menu as Menu
type Msg
= MenuOpened
| MenuClosed
main =
Html.div [ Menu.surfaceAnchor ]
[ Button.text
(Button.config |> Button.setOnClick MenuOpened)
"Open menu"
, Menu.menu
(Menu.config
|> Menu.setOpen True
|> Menu.setOnClose MenuClosed
)
(ListItem.listItem ListItem.config
[ text "Menu item" ]
)
[ ListItem.listItem ListItem.config
[ text "Menu item" ]
]
]
Configuration of a menu
config : Config msg
Default configuration of a menu
setOnClose : msg -> Config msg -> Config msg
Specify a message when the user closes the menu
setOpen : Basics.Bool -> Config msg -> Config msg
Specify whether a menu is open
setQuickOpen : Basics.Bool -> Config msg -> Config msg
Specify whether a menu is opening quickly
A quickly opening menu opens without showing an animation.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
menu : Config msg -> Material.List.Item.ListItem msg -> List (Material.List.Item.ListItem msg) -> Html msg
Menu view function
surfaceAnchor : Html.Attribute msg
Menu surface anchor attribute
Use this on a HTML element that contains both the triggering element and the menu itself.
A menu may not show a transition when opening by setting its setQuickOpen
configuration option to True
.
Menu.menu (Menu.config |> Menu.setQuickOpen True)
(ListItem.listItem ListItem.config [ text "Menu item" ])
[]