Material.Tab

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.

Resources
Basic Usage
Configuration
- Configuration Options
Tab
Active Tab
Tab with Custom Icon

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 alias Config msg =

Config msg

Configuration of a tab

config : Config msg

Default configuration of a tab

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks a tab

setActive : Bool -> Config msg -> Config msg

Specify whether the tab is active

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

Specify additional attributes

Tab

type alias Tab msg =

Tab msg

Tab type

Tabs can only be rendered within a tab bar.

tab : Config msg -> Content -> Tab msg

Tab constructor

type alias Content =

{ label : String

, icon : Maybe Icon

}

Content of a tab

icon : String -> Icon

Material Icon

Tab.tab Tab.config
    { label = "Add to favorites"
    , icon = Just (Tab.icon "favorite")
    }

type alias Icon =

Icon

Icon type

Active Tab

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

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

Tab with Custom Icon

This library natively supports Material Icon, however you may also include SVG or custom icons such as FontAwesome.

customIcon :

(List (Attribute Never) -> List (Html Never) -> Html Never)

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

Tab.tab Tab.config
    { label = "Font Awesome"
    , icon =
        Just
            (Tab.customIcon Html.i
                [ class "fab fa-font-awesome" ]
                []
            )
    }

svgIcon : List (Attribute Never) -> List (Svg Never) -> Icon

SVG icon

Tab.tab Tab.config
    { label = "Tab"
    , icon =
        Just
            (Tab.svgIcon
                [ Svg.Attributes.viewBox "…" ]
                [-- …
                ]
            )
    }

aforemny/material-components-web-elm/5.0.0