glaze/basecoat/tabs

Basecoat documentation: https://basecoatui.com/components/tabs/

Tabs helpers for grouped content views.

Note: This component requires JavaScript from Basecoat.

Anatomy

A tab view has a tablist of tab triggers and one or more matching tab panels.

Recipe

import glaze/basecoat/tabs
import lustre/element/html

fn settings_tabs() {
  tabs.tab_set(
    "settings-tabs",
    [
      #("account", "Account", True, html.div([], [html.text("Account")])),
      #("password", "Password", False, html.div([], [html.text("Password")])),
    ],
    [],
  )
}

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_list(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn tab_panel(
  id: String,
  tab_id: String,
  is_selected: Bool,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn tab_set(
  base_id: String,
  items: List(#(String, String, Bool, element.Element(msg))),
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

pub fn tab_trigger(
  id: String,
  panel_id: String,
  is_selected: Bool,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

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