Drawer content
The drawer is used to organize access to destinations and other functionality on an app.
import Html exposing (Html, text)
import Html.Attributes exposing (style)
import Material.Drawer.Permanent as PermanentDrawer
import Material.List as List
import Material.ListItem as ListItem
main =
Html.div
[ style "display" "flex"
, style "flex-flow" "row nowrap"
]
[ PermanentDrawer.drawer PermanentDrawer.config
[ PermanentDrawer.content []
[ List.list List.config
(ListItem.listItem ListItem.config
[ text "Home" ]
)
[ ListItem.listItem ListItem.config
[ text "Log out" ]
]
]
]
, Html.div [] [ text "Main Content" ]
]Specify additional attributes
Drawer 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.
Drawer header view function
PermanentDrawer.drawer PermanentDrawer.config
[ PermanentDrawer.header []
[ Html.h3 [ PermanentDrawer.title ]
[ text "Title" ]
, Html.h6 [ PermanentDrawer.subtitle ]
[ text "Subtitle" ]
]
, PermanentDrawer.content [] []
]Attribute to mark the title text element of the drawer header
Attribute to mark the subtitle text element of the drawer header
Configuration of a permanent drawer