LineaUI.Components.Accordion (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's accordion and collapse: a list of sections that open under their titles, in LineOne's six styles (basic, border bottom, full bordered, divided items, primary, advanced).

<.accordion id="faq" variant="bordered">
  <.accordion_item id="faq-1" title="Accordion Item 1" open>
    <p>Lorem ipsum dolor sit amet.</p>
  </.accordion_item>
  <.accordion_item id="faq-2" title="Accordion Item 2">…</.accordion_item>
</.accordion>

<.accordion id="help" variant="primary" color="warning">…</.accordion>

One section is open at a time; multiple lets them open independently (LineOne's Collapse page). The advanced style puts a header of your own in each item, with the chevron button at its end:

<.accordion id="people" variant="advanced">
  <.accordion_item id="simon">
    <:header><.avatar …/> Simon Tods</:header>
    …
  </.accordion_item>
</.accordion>

Each item is a LineaUI.Components.Collapse: the browser owns which sections are open, the server's open wins when it changes, LineaUI.open/close/toggle("faq-1") work, and on_open / on_close push %{"id" => item_id} when they are event names.

Summary

Functions

accordion(assigns)

Groups accordion items and gives them their style.

accordion_item(assigns)

A section of an accordion: its title (or :header in the advanced style) and its content.

Functions

accordion(assigns)

Groups accordion items and gives them their style.

<.accordion id="faq" variant="divided" multiple>
  <.accordion_item id="q1" title="Question">Answer</.accordion_item>
</.accordion>

Attributes

  • id (:string) (required)
  • variant (:string) - LineOne's sections: basic, border-bottom, bordered (full bordered), divided (items apart), primary, advanced (a header slot per item). Defaults to "basic". Must be one of "advanced", "basic", "border-bottom", "bordered", "divided", or "primary".
  • color (:string) - The primary style's frame, dividers and header fill: LineOne's blue by default, or any theme color (the Help page's yellow and sky frames). Defaults to "primary". Must be one of "primary", "secondary", "info", "success", "warning", or "error".
  • multiple (:boolean) - Sections open independently (LineOne's Collapse). Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

accordion_item(assigns)

A section of an accordion: its title (or :header in the advanced style) and its content.

<.accordion_item id="q1" title="Accordion Item 1" on_open="q1-opened">
  <p>Lorem ipsum.</p>
</.accordion_item>

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

Attributes

  • id (:string) (required)
  • title (:string) - Defaults to nil.
  • 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) - Defaults to nil.
  • toggle_label (:string) - The accessible name of the :header chevron button. Defaults to "Toggle".
  • class (:any) - Merged into the item. Defaults to nil.
  • Global attributes are accepted.

Slots

  • header - A header of your own, with the chevron button at its end (LineOne's Advanced).
  • inner_block (required)