tabs

Tabs: panels of content, one shown at a time, picked from a row of tabs.

tabs.tabs("account", selected: "profile", attributes: [], tabs: [
  tabs.tab("profile", [], label: [text("Profile")], panel: [profile_form]),
  tabs.tab("password", [], label: [text("Password")], panel: [password_form]),
])

Clicking a tab shows its panel; the arrow keys, Home and End move between tabs. The browser switches panels itself, so a live view need not handle anything. If it does keep the selected tab in its model, update the model from a click on every tab, through the tab’s attributes, so the server’s idea of which panel is shown never falls behind the browser’s.

Types

Look

</>

How the tabs are drawn.

pub type Look {
  Segmented
  Line
}

Constructors

```
Segmented
```
Tabs on a muted track, the selected one raised.
```
Line
```
Plain tabs over a line, the selected one underlined.

Orientation

</>

pub type Orientation {
  Horizontal
  Vertical
}

Constructors

```
Horizontal
```
Tabs in a row above the panels. Left and right move between them.
```
Vertical
```
Tabs in a column beside the panels. Up and down move between them.

Tab

opaque </>

One tab and its panel.

pub opaque type Tab(msg)

Values

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

list_class

</>

pub fn list_class(
  look: Look,
  orientation: Orientation,
) -> css.Class

panel_class

</>

pub fn panel_class() -> css.Class

panels_class

</>

pub fn panels_class() -> css.Class

root_class

</>

pub fn root_class(orientation: Orientation) -> css.Class

styled

</>

pub fn styled(
  id: String,
  selected selected: String,
  orientation orientation: Orientation,
  look look: Look,
  attributes attributes: List(attribute.Attribute(msg)),
  tabs tabs: List(Tab(msg)),
) -> element.Element(msg)

Tabs laid out and drawn another way.

tab

</>

pub fn tab(
  value: String,
  attributes: List(attribute.Attribute(msg)),
  label label: List(element.Element(msg)),
  panel panel: List(element.Element(msg)),
) -> Tab(msg)

A tab. attributes go on the tab’s button, for example a click handler.

tab_class

</>

pub fn tab_class(
  look: Look,
  orientation: Orientation,
) -> css.Class

tabs

</>

pub fn tabs(
  id: String,
  selected selected: String,
  attributes attributes: List(attribute.Attribute(msg)),
  tabs tabs: List(Tab(msg)),
) -> element.Element(msg)

The tabs and their panels, showing the panel of the tab whose value is selected. id must be unique in the document; the tabs’ and panels’ ids are built from it.