AccordionBundle size 5.2 KB |
|
A series of interactive titles stacked on top of each other, each one revealing a section of content.
Installation
pnpm add @inpulse-ds/accordion
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@inpulse-ds/accordion';
return (
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it unstyled?</AccordionTrigger>
<AccordionContent>
Yes. It's unstyled by default, giving you freedom over the look and feel.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Can it be animated?</AccordionTrigger>
<AccordionContent>
Yes! You can use the transition prop to configure the animation.
</AccordionContent>
</AccordionItem>
</Accordion>
);
Examples
Allow to close items
Use the collapsible
prop to allow all items to be collapsed.
Multiple items open at once
Set the type
property to multiple
to allow opening multiple items at the same time.
Expanded by default
Use the defaultValue
property to define which items should be expanded by default.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Ignore the underline
Through the useUnderline
prop, it is possible to remove the underline from the trigger.