The accordion component allows the user to show and hide sections of related content on a page.
An accordion is a lightweight container that may either be used standalone, or be connected to a larger surface, such as a card.
Below you can view various demos with example markup.
Here is an example of a basic accordion inside a paper component.
<.paper extend_class="p-3">
<.accordion id="basic_accordion">
<:header>
<.typography margin={false} variant="h3">
Basic Accordion
</.typography>
</:header>
<:panel max_size="100px">
<.typography variant="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</.typography>
</:panel>
</.accordion>
</.paper>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Here is an example of customizing the component icons.
<.paper extend_class="p-3">
<.accordion
id="custom_icon_accordion"
open_icon={[name: "lock-open", size: "md", variant: "outline"]}
close_icon={[name: "lock-closed", size: "md", variant: "outline"]}
>
<:header>
<.typography margin={false} variant="h3">
Custom Icon Accordion
</.typography>
</:header>
<:panel max_size="100px">
<.typography variant="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</.typography>
</:panel>
</.accordion>
</.paper>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Here is an example of setting the the component to "open" by default.
<.paper extend_class="p-3">
<.accordion
id="default_open_accordion"
open
>
<:header>
<.typography margin={false} variant="h3">
Custom Icon Accordion
</.typography>
</:header>
<:panel max_size="100px">
<.typography variant="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</.typography>
</:panel>
</.accordion>
</.paper>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Accordion, only: [accordion: 1]
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| close_icon | heroicon attrs | color: "slate", name: "chevron-up" | Heroicon component attributes for close icon. |
| extend_class | string | Adds additional classes. | |
| header* | slot | Control for showing and hiding the panel content. | |
| max_size | {100..5000//100}px | 5000px | In order to support transitions, have to apply a max height. |
| open | bool | false | Determines whether the accordion is open by default. |
| open_icon | heroicon attrs | color: "slate", name: "chevron-down" | Heroicon component attributes for open icon. |
| panel* | slot | Section of content associated with an accordion header. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. |