Phoenix UI

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Attribute Type Documentation Default Value
class :any Extend existing component styles
controlled :boolean false
Required id * :string
rest :global
trigger :slot 
<:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down">
  Accordion 1
</:trigger>
<:panel class="p-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</:panel>
<:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down-circle">
  Accordion 2
</:trigger>
<:panel class="p-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</:panel>
panel :slot 
<:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down">
  Accordion 1
</:trigger>
<:panel class="p-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</:panel>
<:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down-circle">
  Accordion 2
</:trigger>
<:panel class="p-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</:panel>