The drawer is used to organize access to destinations and other functionality on an app.
Modal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.
import Html exposing (Html, text)
import Html.Attributes exposing (style)
import Material.Drawer.Modal as ModalDrawer
import Material.List as List
import Material.ListItem as ListItem
main =
Html.div
[ style "display" "flex"
, style "flex-flow" "row nowrap"
]
[ ModalDrawer.drawer ModalDrawer.config
[ ModalDrawer.content []
[ List.list List.config
[ ListItem.listItem ListItem.config
[ text "Home" ]
, ListItem.listItem ListItem.config
[ text "Log out" ]
]
]
]
, ModalDrawer.scrim [] []
, Html.div [] [ text "Main Content" ]
]
Configuration of a model drawer
config : Config msg
Default configuration of a modal drawer
setOnClose : msg -> Config msg -> Config msg
Specify message when the user closes the drawer
setOpen : Basics.Bool -> Config msg -> Config msg
Specify whether the drawer is open
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
drawer : Config msg -> List (Html msg) -> Html msg
Modal drawer view function
content : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Drawer content
scrim : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Modal drawer's scrim element
Prevents the application from interaction while the modal drawer is open. Has
to be the next sibling after the modalDrawer
and before the page's content.
Drawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.
header : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Drawer header view function
ModalDrawer.drawer ModalDrawer.config
[ ModalDrawer.header []
[ Html.h3 [ ModalDrawer.title ] [ text "Title" ]
, Html.h6 [ ModalDrawer.subtitle ]
[ text "Subtitle" ]
]
, ModalDrawer.content [] []
]
title : Html.Attribute msg
Attribute to mark the title text element of the drawer header
subtitle : Html.Attribute msg
Attribute to mark the subtitle text element of the drawer header