LineaUI.Components.Collapse (linea_ui v0.1.1)

Copy Markdown View Source

A section that opens and closes under its trigger, with LineOne's 200ms height animation. It is the piece LineOne's Collapse and Accordion pages are built from (see LineaUI.Components.Accordion).

<.collapse id="details">
  <:trigger class="flex items-center justify-between py-4 font-medium">Shipping details</:trigger>
  <p>Ships in two days.</p>
</.collapse>

chevron adds the rotating chevron LineOne's panels use at the end of the trigger:

<.collapse id="files" open chevron="down">
  <:trigger class="px-4 text-xs font-medium uppercase">My files</:trigger>
  …
</.collapse>

It is a native <details>: the trigger works with the mouse and the keyboard and the browser owns open, which survives patches. When the server changes open, the server wins. LineaUI.open/close/toggle("details") (and their socket forms) open and close it too, and on_open / on_close run on every toggle; as event names they push %{"id" => id} to the LiveView (or target).

Summary

Functions

collapse(assigns)

Renders a collapsible section.

Functions

collapse(assigns)

Renders a collapsible section.

<.collapse id="faq-1" open on_close="faq-closed">
  <:trigger>Can I pay later?</:trigger>
  Yes, within 30 days.
</.collapse>

Events: on_open and on_close push %{"id" => id} when they are event names.

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.
  • on_open (:any) - An event name or a %JS{}. Defaults to nil.
  • on_close (:any) - An event name or a %JS{}. Defaults to nil.
  • target (:any) - The phx-target of on_open / on_close events. Defaults to nil.
  • chevron (:string) - Draws a chevron at the end of the trigger (which becomes a flex row with justify-between). down turns upside down while open, right turns down. Defaults to nil. Must be one of nil, "down", or "right".
  • chevron_class (:any) - Merged into the chevron's <svg>. Defaults to nil.
  • class (:any) - Merged into the <details>. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - Accepts attributes:
    • class (:any) - Classes of the <summary>.
  • inner_block (required)