aforemny / material-components-web-elm / Material.TopAppBar

Top App Bar acts as a container for items such as application title, navigation icon, and action items.

Table of Contents

Resources

Basic Usage

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


type Config msg

Configuration of a top app bar

config : Config msg

Default configuration of a top app bar

Configuration Options

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

Top App Bar

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 sections.

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

Top App Bar with Action Items

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

Fixed Variant

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 Variant

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

Short Always Closed Variant

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

Prominent Variant

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

Dense Variant

To make a top app bar shorter than the default, use its setDense configuration option.

TopAppBar.regular
    (TopAppBar.config |> TopAppBar.setDense True)
    []