0.27.1 • Published 5 years ago
@comparaonline/ui-accordion v0.27.1
@comparaonline/ui-accordion
Installation
yarn add @comparaonline/ui-accordion
Usage
Accordion
import { Accordion } from '@comparaonline/ui-accordion';
The Accordion
is a component based on react-accessible-accordion
version 1
prop | required | type | description |
---|---|---|---|
activeItems | false | array | list of numeric indexes. Each item represent an expanded accordion element |
onItemClick | false | function | item click event handler. It receives index of the item clicked |
AccordionItem
import { AccordionItem } from '@comparaonline/ui-accordion';
AccordionItem
is a container for item head and body. When is active both inner head and body are active.
AccordionItemHead
import { AccordionItemHead } from '@comparaonline/ui-accordion';
AccordionItemHead
is an interactive component. Is active when AccordionItem parent is active. Executes accordion onItemClick if is clicked or keypressed.
prop | required | type | description |
---|---|---|---|
render | true | function | renders component children. It receives active boolean state. |
AccordionItemBody
import { AccordionItemBody } from '@comparaonline/ui-accordion';
AccordionItemBody
is a container. Is active when AccordionItem parent is active.
prop | required | type | description |
---|---|---|---|
render | true | function | renders component children. It receives active boolean state. |
Example
This accordion has two items. The item at index zero is expanded. The other items are collapsed.
<Accordion activeItems={[0]}>
<AccordionItem>
<AccordionItemHead
render={expanded => ...}
/>
<AccordionItemBody
render={expanded => ...}
/>
</AccordionItem>
<AccordionItem>
<AccordionItemHead
render={expanded => ...}
/>
<AccordionItemBody
render={expanded => ...}
/>
</AccordionItem>
</Accordion>