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 items. If you are looking for information about the tab bar container, refer to Material.TabBar.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Tab
• Active Tab

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

Configuration Options

Tab

Active Tab

To mark a tab as active, set its setActive configuration option to True.

Tab.tab (Tab.config |> Tab.setActive True)