Elemental.DataDisplay.Accordion (elemental v0.3.1)
Implements a vertical stacking accordion component, allowing the display of content in a stack where only one is showing at a given time.
This is internally build (inline with Daisy) on top of Elemental.DataDisplay.Collapse
component using the collapse's grouping feature implemented by Elemental.
Usage
<.accordion>
<:item title="How do I create an account?">
Click the "Sign Up" button in the top right corner and follow the registration process.
</:item>
<:item title="I forgot my password. What should I do?">
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
</:item>
<:item title="How do I update my profile information?">
Go to "My Account" settings and select "Edit Profile" to make changes.
</:item>
</.accordion>
Notes
Usage of slots instead of components is intentional to limit flexibility to allow
for the component to be more streamlined and have a clearer API that doesn't
do any magic behind the scenes. For more complex use cases you can
directly use Elemental.DataDisplay.Collapse
.
Summary
Functions
The primary accordion component.
Functions
The primary accordion component.
Attributes
name
(:string
) - The name of the accordion. This must be unique in order to behave correctly and internally is passed toElemental.DataDisplay.Collapse.collapse/1
group
attribute.Defaults to
"accordion"
.class
(:any
) - Additional classes to style the wrapper container. Defaults tonil
.indicator
(:string
) - Chose the indicator to use to showcase if the section is shown/hidden. Defaults to"none"
.
Slots
item
(required) - The specific items to show in the accordion. Internally these will translate toElemental.DataDisplay.Collapse.collapse/1
components for each item.Title is passed under a<div>
to the:title
slot of the collapse component whereas the item itself is used as the body of the collapse component.Accepts attributes:title
(:string
) (required) - The title of the collapsible section.title_class
(:string
) - Any additional classes to pass title.class
(:any
) - Additional classes to pass to the internal collapse component.