Bootstrap.Tab

Use tabs to create tabbable regions. Tabs uses view state, so there is a little bit of wiring needed to use them.

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

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

toMsg Message constructor function used for transitioning view state
options Customization options for the tabs control
withAnimation Option to enable a simple fade in animation for tabs.
items List of tab items

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 (Attribute msg) -> Config msg -> Config msg

Use this function when you need additional customization with Html.Attribute attributes for the tabs control

useHash : 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

id A unique id for the tab item
link The link/menu for the tab item
pane The content part of a tab item

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

Creates a composable tab menu item

attributes List of attributes
children List of child elements

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

Creates a composable tab menu pane

attributes List of attributes
children List of child elements

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) -> 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
        ]

frandibar/elm-bootstrap/1.0.1

Bootstrap.Tab

Tabs

Options

Tab items

With animations

Modules