SaladUI.Accordion (SaladUI v1.0.0)

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>

Component events

:on-value-changed - Maps the value-changed event. Fired when an item is expanded or collapsed.

Accordion is a pure client-side interaction (trigger click) and does not support SaladUI.LiveView.send_command/4.

Summary

Functions

accordion(assigns)

The main accordion component that manages the accordion state.

accordion_content(assigns)

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

accordion_item(assigns)

An accordion item that contains a trigger and content.

accordion_trigger(assigns)

The trigger element that expands/collapses an accordion item.

Functions

accordion(assigns)

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.

Component events

:on-value-changed - Fired when an item is expanded or collapsed.

Attributes

id (:string) (required) - Unique identifier for the accordion.
type (:string) - Whether only one item can be open at a time. Defaults to "single". Must be one of "single", or "multiple".
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)

accordion_content(assigns)

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)

accordion_item(assigns)

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)

accordion_trigger(assigns)

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)