Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.
What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.
The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.
Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/
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 }
]Default configuration of a tab
Specify a message when the user clicks a tab
Specify whether the tab is active
Specify additional attributes
Tab constructor
Content of a tab
Material Icon
Tab.tab Tab.config
{ label = "Add to favorites"
, icon = Just (Tab.icon "favorite")
}Icon type
To mark a tab as active, set its setActive configuration option to True.
Tab.tab (Tab.config |> Tab.setActive True)This library natively supports Material Icon, however you may also include SVG or custom icons such as FontAwesome.
Custom icon
Tab.tab Tab.config
{ label = "Font Awesome"
, icon =
Just
(Tab.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
}SVG icon
Tab.tab Tab.config
{ label = "Tab"
, icon =
Just
(Tab.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
}
Configuration of a tab