lustre_ui - v1.0.0-rc.1

lustre/ui/accordion

The accordion element is an interactive component that allows users to show and hide grouped sections of content. Each section has a panel containing additional content that can be shown or hidden.

Common uses for accordions include:

Anatomy

An accordion is made up of two different parts:

Recipes

Below are some recipes that show common uses of the accordion element.

A basic FAQ accordion:

import lustre/element/html
import lustre/ui/accordion.{accordion}

pub fn faq() {
  accordion([], [
    accordion.item(
      value: "q1",
      label: "What is an accordion?",
      content: [html.text("An interactive element for showing/hiding content")]
    ),
    accordion.item(
      value: "q2",
      label: "When should I use one?",
      content: [html.text("When you want to organize content into sections")]
    )
  ])
}

An accordion with exactly_one mode:

import lustre/element/html
import lustre/ui/accordion.{accordion}

pub fn settings() {
  accordion([accordion.exactly_one()], [
    accordion.item(
      value: "general",
      label: "General",
      content: [html.text("General settings content")]
    ),
    accordion.item(
      value: "privacy",
      label: "Privacy",
      content: [html.text("Privacy settings content")]
    )
  ])
}

Customisation

The behaviour of an accordion can be controlled by setting the mode attribute using one of the following functions:

It is possible to control some aspects of an accordion’s styling through CSS variables. You may want to do this in cases where you are integrating lustre/ui into an existing design system and you want the accordion element to match elements outside of this package.

The following CSS variables can set in your own stylesheets or by using the corresponding attribute functions in this module:

Types

Item

opaque </>

Represents a single item in accordion, including both the title and the content that is shown when the item is expanded. To construct an Item, you should use the item function.

pub opaque type Item(msg)

Constants

name

</> 
pub const name: String

The name of the custom element as rendered in the DOM - “lustre-ui-accordion”.

Functions

accordion

</> 
pub fn accordion(
  attributes: List(Attribute(a)),
  children: List(Item(a)),
) -> Element(a)

The accordion element is an interactive component that allows users to show and hide grouped sections of content. Each section has a panel containing additional content that can be shown or hidden.

Common uses for accordions include:

  • Organizing content into collapsible sections to reduce cognitive load.

  • Creating FAQ sections where questions expand to show their answers.

You set the content of the accordion by passing a list of item elements as children.

By default, the accordion component allows allows only one item to be expanded at a time. You can change this behaviour by setting the mode attribute using one of the following functions:

  • at_most_one: only zero or one item can be expanded at a time. (default)

  • exactly_one: exactly one item must be expanded at all times. By default, the first item is expanded.

  • multi: any number of items can be expanded at a time.

at_most_one

</> 
pub fn at_most_one() -> Attribute(a)

Set the mode attribute of an accordion to allow zero or one item to be expanded at a time. This is the default mode.

border

</> 
pub fn border(value: String) -> Attribute(a)

border_focus

</> 
pub fn border_focus(value: String) -> Attribute(a)

border_width

</> 
pub fn border_width(value: String) -> Attribute(a)

exactly_one

</> 
pub fn exactly_one() -> Attribute(a)

Set the mode attribute of an accordion to allow exactly one item to be expanded at all times. If no item is expanded when this attribute is set, the first item will be automatically expanded.

item

</> 
pub fn item(
  value value: String,
  label label: String,
  content content: List(Element(a)),
) -> Item(a)

An item element represents a single expandable section in an accordion. It contains a label that is always visible and a content area that is shown or hidden when the accordion item is toggled.

The value attribute is used to uniquely identify the item in the accordion and should not clash with an other items in the same accordion. If the value attribute is an empty string, the item will not be rendered.

multi

</> 
pub fn multi() -> Attribute(a)

Set the mode attribute of an accordion to allow any number of items to be expanded at a time.

padding

</> 
pub fn padding(x x: String, y y: String) -> Attribute(a)

padding_x

</> 
pub fn padding_x(value: String) -> Attribute(a)

padding_y

</> 
pub fn padding_y(value: String) -> Attribute(a)

register

</> 
pub fn register() -> Result(Nil, Error)

Register the accordion component with the tag name “lustre-ui-accordion”. In a Lustre SPA you must do this before the component will properly render; most-commonly this is done before you start your Lustre app:

import lustre
import lustre/ui/accordion

pub fn main() {
  let assert Ok(_) = accordion.register()

  let app = lustre.application(init, update, view)
  let assert Ok(_) = lustre.start(app, "#app", Nil)

  ...
}

Another option is to register the component in as an effect:

import lustre/effect.{type Effect}
import lustre/ui/accordion

fn register_components(on_error: fn(lustre.Error) -> msg) -> Effect(msg) {
  use dispatch <- effect.from

  case accordion.register() {
    Ok(_) -> Nil
    Error(error) -> on_error(error) |> dispatch
  }
}

text

</> 
pub fn text(value: String) -> Attribute(a)
✨ Search Document