PaackEng / paack-ui / UI.Tabs

Tab allows visually selecting a page in a horizontal list.

Example of usage:

TabList.tabList Msg.SportSelect
    Sports.toString
    [ Sports.Soccer
    , Sports.Basket
    , Sports.Bowling
    ]
    model.sportSelected
    |> TabList.renderElement renderConfig

Building


type TabList msg a

The TabList msg a type is used for describing the component for later rendering.

tabList : (a -> msg) -> (a -> String) -> List a -> a -> TabList msg a

Describes everything required to create a TabList msg a.

Tabs.tabList Msg.TabSelect
    tabToString
    [ TabOne, TabTwo ]
    model.tabSelected

actionTabList : (a -> UI.Utils.Action.Action msg) -> (a -> String) -> List a -> a -> TabList msg a

Similar to tabList but using Àction msg instead.

Tabs.actionTabList (tabToLink >> Action.TriggerRedirect)
    tabToString
    [ TabOne, TabTwo ]
    model.tabSelected

Rendering

renderElement : UI.RenderConfig.RenderConfig -> TabList msg a -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.