Material.Drawer.Dismissible

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.

Resources
Basic Usage
Configuration
- Configuration Options
Dismissible Drawer
Drawer with Header

Resources

Basic Usage

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

type Config msg

Configuration of a dismissible drawer

config : Config msg

Default configuration of a dismissible drawer

Configuration Options

setOnClose : msg -> Config msg -> Config msg

Specify message when the user closes the drawer

setOpen : Bool -> Config msg -> Config msg

Specify whether the drawer is open

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Dismissible Drawer

drawer : Config msg -> List (Html msg) -> Html msg

Dismissible drawer view function

content : List (Attribute msg) -> List (Html msg) -> Html msg

Drawer content

appContent : 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.

Drawer with Header

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 (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 : Attribute msg

Attribute to mark the title text element of the drawer header

subtitle : Attribute msg

Attribute to mark the subtitle text element of the drawer header

aforemny/material-components-web-elm/9.1.0