glaze/oat/tabs

Oat documentation: https://oat.ink/components/tabs/

Tabs helpers for grouped content views.

Anatomy

A tab view usually has a tablist containing one or more tab controls, plus matching tabpanel sections.

Recipe

import glaze/oat/tabs
import lustre/attribute
import lustre/element/html

tabs.tabs([], [
  tabs.tablist([], [
    tabs.tab([attribute("aria-selected", "true")], [html.text("Overview")]),
    tabs.tab([], [html.text("Details")]),
  ]),
  tabs.tabpanel([], [html.text("Overview content")]),
  tabs.tabpanel([], [html.text("Details content")]),
])

References

• MDN ARIA tablist role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role
• MDN ARIA tab role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role
• MDN ARIA tabpanel role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role

pub fn tab(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn tablist(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn tabpanel(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn tabs(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)