SaladUI.Collapsible (SaladUI v1.0.0)

Copy Markdown View Source

Implementation of Collapsible component for SaladUI framework.

This component allows content to be shown or hidden with smooth animations, accessibility support, and keyboard navigation.

Examples:

<.collapsible id="collapsible-1" open>
  <.collapsible_trigger>
    <.button variant="outline">Show content</.button>
  </.collapsible_trigger>
  <.collapsible_content>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </p>
  </.collapsible_content>
</.collapsible>

Component events

  • :on-open - Maps the open event. Fired when the collapsible enters open state.
  • :on-close - Maps the close event. Fired when the collapsible enters closed state.

Server commands

  • "open" - Opens the collapsible.
  • "close" - Closes the collapsible.
  • "toggle" - Toggles the collapsible.

Summary

Functions

The main collapsible component.

The collapsible content that appears when triggered.

The trigger element that toggles the collapsible content.

Functions

collapsible(assigns)

The main collapsible component.

Options

  • :id - Required unique identifier for the collapsible.
  • :open - Whether the collapsible is initially open. Defaults to false.
  • :on-open - Handler for collapsible open event.
  • :on-close - Handler for collapsible close event.
  • :class - Additional CSS classes.

Component events

  • :on-open - Fired when the collapsible opens.
  • :on-close - Fired when the collapsible closes.

Server commands

  • "open" - Opens the collapsible.
  • "close" - Closes the collapsible.
  • "toggle" - Toggles the collapsible.

Attributes

  • id (:string) (required) - Unique identifier for the collapsible.
  • open (:boolean) - Whether the collapsible is initially open. Defaults to false.
  • on-open (:any) - Handler for collapsible open event. Defaults to nil.
  • on-close (:any) - Handler for collapsible close event. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

collapsible_content(assigns)

The collapsible content that appears when triggered.

Attributes

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

Slots

  • inner_block (required)

collapsible_trigger(assigns)

The trigger element that toggles the collapsible content.

Attributes

  • class (:string) - Defaults to nil.
  • as (:any) - Defaults to "div".
  • Global attributes are accepted.

Slots

  • inner_block (required)