Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
# Demo
Single:
Multiple:
# Attributes
Name | Type | Default | Details |
---|---|---|---|
className | string | ' ' | You can customise by passing tailwind classes. |
itemClassName | string | ' ' | You can customise by passing tailwind classes. |
triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
contentClassName | string | ' ' | You can customise by passing tailwind classes. |
type | AccordionTypes | AccordionTypes.SINGLE | You can pass type of the accordion. |
items | AccordionListItem[] | Required | You can pass list of accordion items. |
# Usage
import { NAccordion, AccordionTypes } from 'nayan';
const Accordion = () => {
const items = [
{ title: 'Heading 1', message: 'Description 1' },
{ title: 'Heading 2', message: 'Description 2' }
];
return (
<div>
<h1 className="text-text mb-3 text-lg">Single:</h1>
<NAccordion type={AccordionTypes.SINGLE} items={items} />
<h1 className="text-text mb-3 mt-5 text-lg">Multiple:</h1>
<NAccordion type={AccordionTypes.MULTIPLE} items={items} />
</div>
);
};
export default Accordion;