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 bar container. If you are looking for the tab item, refer to Material.Tab.
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 of a tab bar
config : Config msg
Default configuration of a tab bar
setStacked : Basics.Bool -> Config msg -> Config msg
Specify a tab bar's tabs to be stacked
Stacked tabs display their icon below the their label.
setMinWidth : Basics.Bool -> Config msg -> Config msg
Specify whether a tab bar's tabs should be of minimum width
Usually, a tab bar's tabs have a minimum with. Using this option, tabs are as narrow as possible.
setIndicatorSpansContent : Basics.Bool -> Config msg -> Config msg
Specify whether a tab bar's tab indicator spans its content
Usually, a tab bar's tab indicator spans the entire tab. Use this option to make it span only it's label instead.
setAlign : Maybe Align -> Config msg -> Config msg
Specify tab bar's alignment of tabs in case they overflow horizontally
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attribtues
tabBar : Config msg -> Material.Tab.Internal.Tab msg -> List (Material.Tab.Internal.Tab msg) -> Html msg
Tab bar view function
The tab bar view function takes its tabs as two arguments. The first argument represents the first tab, and the second argument reresents the remaining tabs. This way we guarantee lists to be non-empty.
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 setStacked
configuration
option to True
.
Tabs within a stacked tab bar should specify both a label and an icon.
TabBar.tabBar (TabBar.config |> TabBar.setStacked True)
(Tab.tab Tab.config { label = "Tab", icon = Nothing })
[]
Tabs by defauls span a minimum width. If you want tabs to be as narrow as
possible, set the tab bar's setMinWidth
configuration option to True
.
TabBar.tabBar (TabBar.config |> TabBar.setMinWidth True)
(Tab.tab Tab.config { label = "Tab", icon = Nothing })
[]
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
setIndicatorSpansContent
configuration option to True
.
TabBar.tabBar
(TabBar.config |> TabBar.setIndicatorSpansContent True)
(Tab.tab Tab.config { label = "Tab", icon = Nothing })
[]
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.
Alignment of a tab scroller
TabBar.tabBar
(TabBar.config |> TabBar.setAlign (Just TabBar.Center))
(Tab.tab Tab.config { label = "Tab", icon = Nothing })
[]
You may programatically focus a tab bar by assigning an id attribute to it and
use Browser.Dom.focus
.
TabBar.tabBar
(TabBar.config
|> TabBar.setAttributes
[ Html.Attributes.id "my-tabs" ]
)
(Tab.tab Tab.config { label = "Tab", icon = Nothing })
[]