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 Scroller and Tab components.

Table of Contents

• Resources
• Basic Usage
• Tab Bar
• Tabs
• Stacked Tabs
• Minimum Width Tabs
• Content-Spanning Tab Indicator
• Tab Scroller
  • Tab Scroller Alignment

Resources

• Demo: Tab Bar
• Material Design Guidelines: Tabs
• MDC Web: Tab Bar, Tab, Tab Scroller
• Sass Mixins: Tab Bar, Tab, Tab Scroller

Basic Usage

import Material.TabBar
    exposing
        ( tab
        , tabBar
        , tabBarConfig
        , tabConfig
        )


type Msg
    = TabClicked Int


main =
    tabBar tabBarConfig
        [ tab
            { tabConfig
                | active = True
                , onClick = Just (TabClicked 0)
            }
            { label = "Tab 1", icon = Nothing }
        , tab
            { tabConfig
                | active = False
                , onClick = Just (TabClicked 1)
            }
            { label = "Tab 1", icon = Nothing }
        ]

Tab Bar

Tabs

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 stacked configuration field to True.

Requires that the tabs have both label and icon.

    tabBar
        { tabBarConfig | stacked = True }
        [ tab tabConfig
        { label = "Favorites", icon = Just "favorite" }
        ]

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 minWidth configuration field to True.

    tabBar
        { tabBarConfig | minWidth = True }
        [ tab tabConfig
            { label = "Favorites", 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 indicatorSpansContent configuration field to True.

    tabBar
        { tabBarConfig | indicatorSpansContent = True }
        [ tab tabConfig
            { label = "Favorites", 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.

Center-aligned tab scroller

    tabBar
        { tabBarConfig
            | tabScrollerConfig =
              { tabScrollerConfig
                  | align =
                      Just TabBar.TabScrollerAlignCenter
              }
        }
        [ tab
            { tabConfig
                | active = True
                , onClick = Just (TabClicked 0)
            }
            { label = "Tab 1", icon = Nothing }
        , tab
            { tabConfig
                | active = False
                , onClick = Just (TabClicked 1)
            }
            { label = "Tab 1", icon = Nothing }
        ]