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" ]
]
]
]
Configuration of a top app bar
config : Config msg
Default configuration of a top app bar
setFixed : Basics.Bool -> Config msg -> Config msg
Specify whether a top app bar is fixed
A fixed top app bar does not scroll away when the user is scrolling the page.
setDense : Basics.Bool -> Config msg -> Config msg
Specify whether a top app bar is dense
A dense top app bar is more compact, featuring smaller than usual margins.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
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.
regular : Config msg -> List (Html msg) -> Html msg
Regular top app bar view function
row : List (Html.Attribute msg) -> List (Html msg) -> Html msg
A row is the first child of a top app bar. It contains the top app bar's
section
s.
section : List (Html.Attribute msg) -> List (Html msg) -> Html msg
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.
alignEnd : Html.Attribute msg
End-align a top app bar's section
alignStart : Html.Attribute msg
Start-align a top app bar's section
navigationIcon : Html.Attribute msg
Apply this attribute to an icon button to mark it as a top app bar's navigation icon
title : Html.Attribute msg
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")
]
]
]
actionItem : Html.Attribute msg
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)
[]
fixedAdjust : Html.Attribute msg
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.
denseFixedAdjust : Html.Attribute msg
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.
denseProminentFixedAdjust : Html.Attribute msg
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.
prominentFixedAdjust : Html.Attribute msg
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.
shortFixedAdjust : Html.Attribute msg
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 []
short : Config msg -> List (Html msg) -> Html msg
Short top app bar view function
A short top app bar can be configured to always appear closed.
TopAppBar.shortCollapsed TopAppBar.config []
shortCollapsed : Config msg -> List (Html msg) -> Html msg
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 []
prominent : Config msg -> List (Html msg) -> Html msg
Prominent top app bar view function
To make a top app bar shorter than the default, use its setDense
configuration option.
TopAppBar.regular
(TopAppBar.config |> TopAppBar.setDense True)
[]