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

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The tab bar contains the tab components.

This module concerns the tab bar container. If you are looking for the tab item, refer to Material.Tab.

Table of Contents

Resources

Basic Usage

import Material.Tab as Tab
import Material.TabBar as TabBar

type Msg
    = TabClicked Int

main =
    TabBar.tabBar TabBar.config
        (Tab.tab
            (Tab.config
                |> Tab.setActive True
                |> Tab.setOnClick (TabClicked 0)
            )
            { label = "Tab 1", icon = Nothing }
        )
        [ Tab.tab
            (Tab.config |> Tab.setOnClick (TabClicked 1))
            { label = "Tab 2", icon = Nothing }
        ]

Configuration


type Config msg

Configuration of a tab bar

config : Config msg

Default configuration of a tab bar

Configuration Options

setStacked : Basics.Bool -> Config msg -> Config msg

Specify a tab bar's tabs to be stacked

Stacked tabs display their icon below the their label.

setMinWidth : Basics.Bool -> Config msg -> Config msg

Specify whether a tab bar's tabs should be of minimum width

Usually, a tab bar's tabs have a minimum with. Using this option, tabs are as narrow as possible.

setIndicatorSpansContent : Basics.Bool -> Config msg -> Config msg

Specify whether a tab bar's tab indicator spans its content

Usually, a tab bar's tab indicator spans the entire tab. Use this option to make it span only it's label instead.

setAlign : Maybe Align -> Config msg -> Config msg

Specify tab bar's alignment of tabs in case they overflow horizontally

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

Specify additional attribtues

Tab Bar

tabBar : Config msg -> Material.Tab.Internal.Tab msg -> List (Material.Tab.Internal.Tab msg) -> Html msg

Tab bar view function

The tab bar view function takes its tabs as two arguments. The first argument represents the first tab, and the second argument reresents the remaining tabs. This way we guarantee lists to be non-empty.

Stacked Tabs

In a stacked tab bar, the label and icon of a tab flow vertically instead of horizontally. To make a tab bar stacked, set its setStacked configuration option to True.

Tabs within a stacked tab bar should specify both a label and an icon.

TabBar.tabBar (TabBar.config |> TabBar.setStacked True)
    (Tab.tab Tab.config { label = "Tab", icon = Nothing })
    []

Minimum Width Tabs

Tabs by defauls span a minimum width. If you want tabs to be as narrow as possible, set the tab bar's setMinWidth configuration option to True.

TabBar.tabBar (TabBar.config |> TabBar.setMinWidth True)
    (Tab.tab Tab.config { label = "Tab", icon = Nothing })
    []

Content-Spanning Tab Indicator

The tab's active indicator by default spans the entire tab. If you want active indicators to only span their tab's content, set the tab bar's setIndicatorSpansContent configuration option to True.

TabBar.tabBar
    (TabBar.config |> TabBar.setIndicatorSpansContent True)
    (Tab.tab Tab.config { label = "Tab", icon = Nothing })
    []

Tab scroller

The tab bar supports tabs overflowing its width and will enable scrolling in that case. You may change the alignment of the elements inside the scroll content.


type Align
    = Start
    | End
    | Center

Alignment of a tab scroller

Center-aligned tab scroller

TabBar.tabBar
    (TabBar.config |> TabBar.setAlign (Just TabBar.Center))
    (Tab.tab Tab.config { label = "Tab", icon = Nothing })
    []

Focus a Tab Bar

You may programatically focus a tab bar by assigning an id attribute to it and use Browser.Dom.focus.

TabBar.tabBar
    (TabBar.config
        |> TabBar.setAttributes
            [ Html.Attributes.id "my-tabs" ]
    )
    (Tab.tab Tab.config { label = "Tab", icon = Nothing })
    []