EdutainmentLIVE / elm-bootstrap / Bootstrap.Tab

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

Tabs

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


type Config msg

Configuration for a tabs control

NOTE When using animations you must also remember to set up subscriptions


type State

Opaque type representing the view state of the tabs control

Options

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.


type Option msg

Opaque type representing customization options for a tabs control

Tab items

item : { id : String, link : Link msg, pane : Pane msg } -> Item msg

Create a composable tab item

link : List (Html.Attribute msg) -> List (Html msg) -> Link msg

Creates a composable tab menu item

pane : List (Html.Attribute msg) -> List (Html msg) -> Pane msg

Creates a composable tab menu pane


type Item msg

Opaque type representing a tab item


type Link msg

Opaque type representing a tab item link


type Pane msg

Opaque type representing a tab item pane

With animations

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
        ]