aforemny / material-components-web-elm / Material.Drawer.Modal

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.

Table of Contents

Resources

Basic Usage

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


type Config msg

Configuration of a model drawer

config : Config msg

Default configuration of a modal drawer

Configuration Options

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

Modal Drawer

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.

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 (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