PF6.Tabs

PF6 Tabs component

Tabs allow users to navigate between views within the same context.

Definition

type Tabs msg

Opaque Tabs type

type Tab msg

A single tab definition

Tab display variant

{ activeKey : String

, onSelect : String -> msg

, tabs : List (Tab msg)

}

-> Tabs msg

Construct a Tabs component

tabs
    { activeKey = model.activeTab
    , onSelect = TabSelected
    , tabs = [ tab "overview" "Overview", tab "details" "Details" ]
    }

tab : String -> String -> Tab msg

Construct a tab with a key and label

withTabIcon : Element msg -> Tab msg -> Tab msg

Add an icon to a tab

Disable a tab

Box variant — tabs have a box/card appearance

Vertical layout

Filled variant — tabs stretch to fill the width

Secondary tabs (smaller, for sub-navigation)

toMarkup : Theme -> Tabs msg -> Element msg

Render the Tabs as an Element msg