@chantelle/accordion
v0.1.1
Published
The Accordion component of the Chantelle Pattern Library
Downloads
4
Readme
Accordion
Installation
yarn add @chantelle/accordion
Usage
First, include the CSS in your HTML:
<link rel="stylesheet" href="node_modules/@chantelle/accordion/dist/styles.css">
import '@chantelle/accordion/dist/styles.css';
React Component
import { Accordion, AccordionItem } from '@chantelle/accordion';
ReactDOM.render(
<Accordion>
<AccordionItem title="Section Title One">Hello there</AccordionItem>
<AccordionItem title="Section Title Two">General Kenobi</AccordionItem>
</Accordion>,
container
);
CSS API
To use the Accordion component, add the .pl-accordion
to the <div>
element to apply the styles.
Don't forget add name and id for you Accordion
You can you type='checkbox'
for standard Accordion
and type='radio
' and same name
for auto fold
<div class="pl-accordion">
<div class="pl-accordion-item">
<input id="myFilterId1" name="myFilter1" type='checkbox' class="pl-accordion-handle"/>
<label for="myFilterId1" class="pl-accordion-title">Section One</label>
<div class="pl-accordion-content">
<div class="pl-accordion-wrapper">here text</div>
</div>
</div>
<div class="pl-accordion-item">
<input id="myFilterId2" name="myFilter2" type='checkbox' class="pl-accordion-handle"/>
<label for="myFilterId2" class="pl-accordion-title">Section Two</label>
<div class="pl-accordion-content">
<div class="pl-accordion-wrapper">here text</div>
</div>
</div>
</div>