Use tabs to create tabbable regions. Tabs uses view state, so there is a little bit of wiring needed to use them.
-- example with animation, you can drop the subscription part when not using animations
type alias Model =
{ tabState : Tab.State }
init : ( Model, Cmd Msg )
init =
( { tabState = Tab.initalState }, Cmd.none )
type Msg
= TabMsg Tab.State
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
TabMsg state ->
( { model | tabState = state }
, Cmd.none
)
view : Model -> Html msg
view model =
Tab.config TabMsg
|> Tab.withAnimation
-- remember to wire up subscriptions when using this option
|> Tab.right
|> Tab.items
[ Tab.item
{ id = "tabItem1"
, link = Tab.link [] [ text "Tab 1" ]
, pane = Tab.pane [] [ text "Tab 1 Content" ]
}
, Tab.item
{ id = "tabItem2"
, link = Tab.link [] [ text "Tab 2" ]
, pane = Tab.pane [] [ text "Tab 2 Content" ]
}
]
|> Tab.view model.tabState
subscriptions : Model -> Sub Msg
subscriptions model =
Tab.subscriptions model.tabState TabMsg
view : State -> Config msg -> Html msg
Creates a tab control which keeps track of the selected tab item and displays the corresponding tab pane for you
Tab.config TabMsg
|> Tab.withAnimation
-- remember to wire up subscriptions when using this option
|> Tab.right
|> Tab.items
[ Tab.item
{ id = "tabItem1"
, link = Tab.link [] [ text "Tab 1" ]
, pane = Tab.pane [] [ text "Tab 1 Content" ]
}
, Tab.item
{ id = "tabItem2"
, link = Tab.link [] [ text "Tab 2" ]
, pane = Tab.pane [] [ text "Tab 2 Content" ]
}
]
|> Tab.view model.tabState
view_ : State -> Config msg -> (String -> State -> msg) -> Html msg
Just like view
, plus allows you to construct a Msg with the Tab's id
Tab.view_ tabState
( Tab.config Msg.TabMsg -- TabMsg gets ignored
|> Tab.items (List.map (tab listOfThings) tags)
|> Tab.left
)
Msg.FetchThings -- makes an API call when clicking the Tab to fetch 'things'
listOfThings things tag =
Tab.item
{ id = tag.url
, link = Tab.link [] [ text tag.name ]
, pane = Tab.pane [] [ renderThings things tag ]
}
config : (State -> msg) -> Config msg
Create an initial/default view configuration for a Tab.
items : List (Item msg) -> Config msg -> Config msg
Define the tab items for a Tab.
initialState : State
Use this function to create the inital state for the tabs control
customInitialState : String -> State
Use this function if you want to initialize your tabs control with a specific tab selected.
NOTE: Should you specify an id not found, the first tab item will be displayd by default
Configuration for a tabs control
toMsg
Message constructor function used for transitioning view stateoptions
Customization options for the tabs controlwithAnimation
Option to enable a simple fade in animation for tabs.items
List of tab itemsNOTE When using animations you must also remember to set up subscriptions
Opaque type representing the view state of the tabs control
pills : Config msg -> Config msg
Option to make the tab menu items display with a pilled/buttonish look
withAnimation : Config msg -> Config msg
Option to add a fade in/out animation effect when switching tabs
justified : Config msg -> Config msg
Space out tab menu items evenly accross the the whole tabs control width
fill : Config msg -> Config msg
Space out tab menu items to use the entire tabs control width, as opposed to justified
items will not get equal widths
center : Config msg -> Config msg
Option to center the tab menu items
right : Config msg -> Config msg
Option to place tab menu items to the right
attrs : List (Html.Attribute msg) -> Config msg -> Config msg
Use this function when you need additional customization with Html.Attribute attributes for the tabs control
useHash : Basics.Bool -> Config msg -> Config msg
By default the click handler for tabs has preventDefault true. If however you want the url hash to be updated with the tab item id, you may use this function to ensure the url is changed when users click on a tab item. This is handy if you use "real"" paths for your SPA pages but also want to be able to "deep-link" to a particular tab item.
Opaque type representing customization options for a tabs control
item : { id : String, link : Link msg, pane : Pane msg } -> Item msg
Create a composable tab item
id
A unique id for the tab itemlink
The link/menu for the tab itempane
The content part of a tab itemlink : List (Html.Attribute msg) -> List (Html msg) -> Link msg
Creates a composable tab menu item
attributes
List of attributeschildren
List of child elementspane : List (Html.Attribute msg) -> List (Html msg) -> Pane msg
Creates a composable tab menu pane
attributes
List of attributeschildren
List of child elementsOpaque type representing a tab item
Opaque type representing a tab item link
Opaque type representing a tab item pane
subscriptions : State -> (State -> msg) -> Platform.Sub.Sub msg
When using animations you must remember to wire up this function to your main subscriptions
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Tab.subscriptions model.tabState TabMsg
-- ...other subscriptions you might have
]