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 }
]Specify a tab bar's tabs to be stacked
Stacked tabs display their icon below the their label.
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.
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.
Specify tab bar's alignment of tabs in case they overflow horizontally
Specify additional attribtues
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) []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) []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)
[]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))
[]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" ]
)
[]
Configuration of a tab bar