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/
Top App Bar acts as a container for items such as application title, navigation icon, and action items.
import Material.TopAppBar as TopAppBar
main =
TopAppBar.regular TopAppBar.config
[ TopAppBar.row []
[ TopAppBar.section [ TopAppBar.alignStart ]
[ IconButton.iconButton
(IconButton.config
|> IconButton.setAttributes
[ TopAppBar.navigationIcon ]
)
(IconButton.icon "menu")
, Html.span [ TopAppBar.title ]
[ text "Title" ]
]
]
]Specify whether a top app bar is fixed
A fixed top app bar does not scroll away when the user is scrolling the page.
Specify whether a top app bar is dense
A dense top app bar is more compact, featuring smaller than usual margins.
Specify additional attributes
Usually a top app bar contains one row with at least one start-aligned section. This is where you would normally place your navigation icon and title.
A row is the first child of a top app bar. It contains the top app bar's
sections.
Sections subdivide the top app bar's rows. A section may be start- or end-aligned. Usually, the first section is start-aligned and contains the top app bar's navigation icon and title.
End-align a top app bar's section
Start-align a top app bar's section
Apply this attribute to a element to mark it as the top app bar's title
A top app bar can contain action items that are placed on the opposite side of
the navigation icon. To do so, add another end-aligned section to the top app
bar's row. Do not forget to set the actionItem attribute on the icons.
TopAppBar.regular TopAppBar.config
[ TopAppBar.row []
[ TopAppBar.section [ TopAppBar.alignStart ]
[ IconButton.iconButton
(IconButton.config
|> IconButton.setAttributes
[ TopAppBar.navigationIcon ]
)
(IconButton.icon "menu")
, Html.span [ TopAppBar.title ]
[ text "Title" ]
]
, TopAppBar.section [ TopAppBar.alignEnd ]
[ IconButton.iconButton
(IconButton.config
|> IconButton.setAttributes
[ TopAppBar.actionItem ]
)
(IconButton.icon "print")
, IconButton.iconButton
(IconButton.config
|> IconButton.setAttributes
[ TopAppBar.actionItem ]
)
(IconButton.icon "bookmark")
]
]
]Apply this attribute to a icon button to mark it as a top app bar's action item
To make a top app bar fixed to the top, set its setFixed configuration option
to True. Since a fixed top app bar would overlay the pages content, an
appropriate margin has to be applied to the page's content, called the fixed
adjust.
TopAppBar.regular
(TopAppBar.config |> TopAppBar.setFixed True)
[]Appropriate padding for a fixed top app bar.
Apply this to the page's content so that a fixed top app bar does not overlay the content.
Appropriate padding for a dense fixed top app bar.
Apply this to the page's content so that a fixed top app bar does not overlay the content.
Appropriate padding for a dense prominent fixed top app bar.
Apply this to the page's content so that a fixed top app bar does not overlay the content.
Appropriate padding for a prominent fixed top app bar.
Apply this to the page's content so that a fixed top app bar does not overlay the content.
Appropriate padding for a short fixed top app bar.
Apply this to the page's content so that a fixed top app bar does not overlay the content.
Short top app bars collapse to the navigation icon side when scrolled.
TopAppBar.short TopAppBar.config []A short top app bar can be configured to always appear closed.
TopAppBar.shortCollapsed TopAppBar.config []Short always closed top app bar view function
To make a top app bar taller than the default, you may use a prominent top app bar.
TopAppBar.prominent TopAppBar.config []To make a top app bar shorter than the default, use its setDense
configuration option.
TopAppBar.regular
(TopAppBar.config |> TopAppBar.setDense True)
[]
Configuration of a top app bar