View Source SaladUI.Accordion (SaladUI v1.0.0-beta.1)

Implementation of the Accordion component.

Accordions are vertically stacked sections that can be expanded/collapsed to reveal their content. They are useful for breaking down complex content into digestible sections.

Examples:

<.accordion
  id="faq-accordion"
  type="single"
  default-value="item-1"
  on-value-changed={JS.push("accordion_changed")}
>
  <.accordion_item value="item-1">
    <.accordion_trigger>
      Is it accessible?
    </.accordion_trigger>
    <.accordion_content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>
      Is it styled?
    </.accordion_trigger>
    <.accordion_content>
      Yes. It comes with default styles that matches the other components' aesthetic.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Summary

Functions

The main accordion component that manages the accordion state.

The content element of an accordion item that shows when expanded.

An accordion item that contains a trigger and content.

The trigger element that expands/collapses an accordion item.

Functions

The main accordion component that manages the accordion state.

Options

  • :id - Required unique identifier for the accordion.
  • :type - Type of accordion: "single" or "multiple". Defaults to "single".
  • :value - The currently expanded items. String for "single", list for "multiple".
  • :default-value - The default expanded items. Used if :value is not provided.
  • :disabled - Whether the accordion is disabled. Defaults to false.
  • :on-value-changed - Handler for accordion value change event.
  • :class - Additional CSS classes.

Attributes

  • id (:string) (required) - Unique identifier for the accordion.
  • type (:string) - Whether only one item can be open at a time. Defaults to "single".
  • value (:any) - The value(s) of the currently expanded item(s). Defaults to nil.
  • default-value (:any) - The default value(s) of the expanded item(s). Defaults to nil.
  • disabled (:boolean) - Whether the accordion is disabled. Defaults to false.
  • on-value-changed (:any) - Handler for accordion value change event. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

accordion_content(assigns)

View Source

The content element of an accordion item that shows when expanded.

Options

  • :class - Additional CSS classes.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

An accordion item that contains a trigger and content.

Options

  • :value - Required unique value for this accordion item.
  • :disabled - Whether this item is disabled. Defaults to false.
  • :class - Additional CSS classes.

Attributes

  • value (:string) (required) - Unique value for this accordion item.
  • disabled (:boolean) - Whether this item is disabled. Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

accordion_trigger(assigns)

View Source

The trigger element that expands/collapses an accordion item.

Options

  • :class - Additional CSS classes.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)