glaze/basecoat/accordion

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

The accordion helpers render semantic HTML accordion markup using <details> and <summary> elements.

Anatomy

Each accordion item is a <details> with a <summary> title and a content section.

Recipe

import glaze/basecoat/accordion
import lustre/element/html

fn my_accordion() {
  accordion.accordion([], [
    accordion.item("Is it accessible?", [], [
      html.p([], [html.text("Yes. It adheres to the WAI-ARIA design pattern.")]),
    ]),
    accordion.item("Is it styled?", [], [
      html.p([], [html.text("Yes. It comes with default styles.")]),
    ]),
  ])
}

References

• MDN <details>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
• MDN <summary>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

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

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

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