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

The drawer is used to organize access to destinations and other functionality on an app.

Table of Contents

Resources

Basic Usage

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" ]
        ]

Configuration


type Config msg

Configuration of a permanent drawer

config : Config msg

Default configuration of a permanent drawer

Configuration Options

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

Specify additional attributes

Permanent Drawer

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

Permanent drawer view function

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

Drawer 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

PermanentDrawer.drawer PermanentDrawer.config
    [ PermanentDrawer.header []
        [ Html.h3 [ PermanentDrawer.title ]
            [ text "Title" ]
        , Html.h6 [ PermanentDrawer.subtitle ]
            [ text "Subtitle" ]
        ]
    , PermanentDrawer.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