Drawer content
Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.
What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.
The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.
Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/
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.
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" ]
]Specify message when the user closes the drawer
Specify additional attributes
Drawer content
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.
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
ModalDrawer.drawer ModalDrawer.config
[ ModalDrawer.header []
[ Html.h3 [ ModalDrawer.title ] [ text "Title" ]
, Html.h6 [ ModalDrawer.subtitle ]
[ text "Subtitle" ]
]
, ModalDrawer.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 model drawer