The drawer is used to organize access to destinations and other functionality on an app.
Dismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.
import Html exposing (Html, text)
import Html.Attributes exposing (style)
import Material.Drawer.Dismissible as DismissibleDrawer
import Material.List as List
import Material.ListItem as ListItem
main =
Html.div
[ style "display" "flex"
, style "flex-flow" "row nowrap"
]
[ DismissibleDrawer.drawer DismissibleDrawer.config
[ DismissibleDrawer.content []
[ List.list List.config
[ ListItem.listItem ListItem.config
[ text "Home" ]
, ListItem.listItem ListItem.config
[ text "Log out" ]
]
]
]
, Html.div [ DismissibleDrawer.appContent ]
[ text "Main Content" ]
]
Configuration of a dismissible drawer
config : Config msg
Default configuration of a dismissible 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
Dismissible drawer view function
content : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Drawer content
appContent : Html.Attribute msg
Dismissible drawer's app content marker
Apply this attribute to the page's content for the open/close animation to work. The page content has to be the next sibling of the dismissible drawer.
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
DismissibleDrawer.drawer DismissibleDrawer.config
[ DismissibleDrawer.header []
[ Html.h3 [ DismissibleDrawer.title ]
[ text "Title" ]
, Html.h6 [ DismissibleDrawer.subtitle ]
[ text "Subtitle" ]
]
, DismissibleDrawer.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