aforemny / material-components-web-elm / 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.

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 alias Config msg =
Internal.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 : Basics.Bool -> Config msg -> Config msg

Specify whether the tab is active

If no tab within a tab bar is specified as active, the first tab will be active. If more than one tab within a tab bar is specified as active, only the first one will be considered active.

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

Specify additional attributes

Tab


type alias Tab msg =
Internal.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 =
Internal.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)
    { label = "Tab", icon = Nothing }

Tab with Custom Icon

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

customIcon : (List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Html Basics.Never) -> List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Icon

Custom icon

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

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

SVG icon

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