viewStarter : { label : String, tabs : List { label : String, panel : Html msg }, active : String, onChange : String -> Task Browser.Dom.Error () -> msg } -> Html msg
Render a tabs widget with default styling. You have to provide the following fields:
Task.attempt
the second argument in your update function to make sure the correct tab
receives focus.NOTE: This function is meant to get you started with this package. If you
need more then one tabs widget on your page or want custom styling and
interaction, you should take a look at the view
function below.
view : Views node msg -> { label : Label, tabs : List (Tab node tab), active : tab, onChange : tab -> Task Browser.Dom.Error () -> msg, orientation : Orientation, activation : Activation } -> node
Render a (customized) tabs widget. You must provide
Views
for rendering and the following configuration fields:
Label
for possible options.Tab
for a description of its fields.Task.attempt
the second argument in your update function to make sure the correct tab
receives focus.Activation
for possible options.There are two ways to label tabs: it can be
labelledby
by another DOM element with the
given id or it can provide its own label
.
labelledby : String -> Label
label : String -> Label
{ tag : tag
, id : String
, label : node
, panel : node
, focusable : Basics.Bool
}
From the WAI-ARIA Authoring Practices:
Automatic
Activation: A tabs widget where tabs are
automatically activated and their panel is displayed when they receive focus.Manual
Activation: A tabs widget where users activate a tab and
display its panel by pressing Space or Enter.Opaque type for providing view customization of the tabs widget.
html : { container : List (Html.Attribute msg), tabList : List (Html.Attribute msg), tab : Basics.Bool -> List (Html.Attribute msg), panel : Basics.Bool -> List (Html.Attribute msg) } -> Views (Html msg) msg
Generate view customization the standard
elm/html
package.
The DOM structure of the tabs will be something like this:
tabs =
Html.div
[ ... ] -- container attributes
[ Html.div
[ ... ] -- tabList attributes
[ tabs ]
, panels
]
tab =
Html.button
[ ... ] -- tab attributes
[ tabLabel ]
panel =
Html.div
[ ... ] -- panel attributes
[ panelContent ]
custom : { tabs : TabsAttrs -> { tabs : List node, panels : List node } -> node, tab : TabAttrs msg -> { label : node, active : Basics.Bool } -> node, panel : PanelAttrs -> { panel : node, active : Basics.Bool } -> node } -> Views node msg
If you want to use other UI libraries like
rtfeldman/elm-css
or
mdgriffith/elm-ui
you have to generate Views
using this function.
Take a look at the implementation of html
for
a starting point. The
examples/
folder of the package repository contains an implementation for
mdgriffith/elm-ui
.
{ role : String
, ariaLabel : Maybe String
, ariaLabelledBy : Maybe String
}
Make sure to add HTML attributes for all attributes in this record to the tabs list container.
role
HTML attribute.aria-label
HTML attribute.aria-labelledby
HTML attribute.{ role : String
, ariaSelected : Basics.Bool
, ariaControls : String
, id : String
, onClick : msg
, preventDefaultOnKeydown : Json.Decode.Decoder ( msg
, Basics.Bool )
, tabindex : Basics.Int
}
Make sure to add HTML attributes and event handlers for all attributes in this record to the tab.
role
HTML attribute.aria-selected
HTML attribute.aria-controls
HTML attribute.onclick
event handler.onkeydown
event handler
which can prevent default.tabindex
HTML attribute.{ role : String
, id : String
, ariaLabelledby : String
, tabindex : Maybe Basics.Int
, hidden : Basics.Bool
}
Make sure to add HTML attributes for all attributes in this record to the panel.
role
HTML attribute.aria-labelledby
HTML attribute.tabindex
HTML attribute.display:
none;
.