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.
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 }
]
Internal.Config msg
Configuration of a tab
config : Config msg
Default configuration of a tab
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
Internal.Tab msg
Tab type
Tabs can only be rendered within a tab bar.
tab : Config msg -> Content -> Tab msg
Tab constructor
{ 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")
}
Internal.Icon
Icon type
To mark a tab as active, set its setActive
configuration option to True
.
Tab.tab (Tab.config |> Tab.setActive True)
{ label = "Tab", icon = Nothing }
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 "…" ]
[-- …
]
)
}