Accordion
RC 1.2Kb +0.6 multi
Collapsible containers that can contain disclosure elements. They can be be single or grouped, where only one can be open at a time.
js
import 'pyro/accordion'
import 'pyro/accordion-group'Usage
Single accordion
A single accordion with a summary as a prop, and content as a slot.
html
<pyro-accordion summary="Click me" open>
<span slot="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt possimus officia nihil nam consequatur
ullam aspernatur veritatis officiis consectetur cum ipsam reprehenderit quos quo eum saepe facere, quisquam
sed ex?
</span>
</pyro-accordion>Grouped accordions
If Accordions are inside a <pyro-accordion-group> only one of them can be open at a time, opening an accordion will close the others.
html
<pyro-accordion-group>
<pyro-accordion summary="Click me 1" open>
<span slot="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt possimus officia nihil nam consequatur
ullam aspernatur veritatis officiis consectetur cum ipsam reprehenderit quos quo eum saepe facere, quisquam
sed ex?
</span>
</pyro-accordion>
<pyro-accordion summary="Click me 2">
<span slot="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt possimus officia nihil nam consequatur
ullam aspernatur veritatis officiis consectetur cum ipsam reprehenderit quos quo eum saepe facere, quisquam
sed ex?
</span>
</pyro-accordion>
<pyro-accordion summary="Click me 3">
<span slot="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt possimus officia nihil nam consequatur
ullam aspernatur veritatis officiis consectetur cum ipsam reprehenderit quos quo eum saepe facere, quisquam
sed ex?
</span>
</pyro-accordion>
</pyro-accordion-group>Variations
With custom icon
The icon slot can be used to change the default icon. It can be a pyro-icon, a regular image or an empty slot to remove the icon. The no-flip props is being used to prevent the icon to be flipped when opening/closing.
Props
ts
interface AccordionProps {
/** Summary of the accordion, overriden by `slot="summary"` */
summary?: string;
/** Content of the accordion, overriden by `slot="content"` */
content?: string;
/** Indicates whether the accordion is open */
open?: boolean;
/** Disables flipping of the icon when open/closed */
'no-flip'?: boolean;
/** Slot for content */
children?: any;
}Slots
ts
/**
* @slot summary - Summary of the accordion, always visible
* @slot content - Content of the accordion that can be opened
* @slot icon - Slot for the icon to be place inside the summary, chevron by default
*/CSS prop theming
In addition to the css props below, the component can be more heavily customized by using the slots to override the content, text by default, and the icon.
Full theming sheet
js
/** {--specific-value = --default} - explanation `css-property`
* @prop {--pyro-accordion-text-color = --pyro-text-color)} - `color`
* @prop {--pyro-accordion-surface-color = --pyro-surface-color)} - `background`
* @prop {--pyro-accordion-border = --pyro-border)} - `border`
* @prop {--pyro-accordion-border-radius = --pyro-border-radius)} - `border-radius`
* @prop {--pyro-accordion-spacing = --pyro-spacing)} - `padding`
*/