Accordion / React
Groups related long content into sections shown one at a time.
To implement Accordion component into your project you’ll need to the import the Accordion and the AccordionSection:
import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
After adding import into your project you can use it simply like:
<Accordion>
<AccordionSection>Hello World!</AccordionSection>
</Accordion>
Props
Table below contains all types of the props available in the Accordion component.
Name | Type | Default | Description |
---|---|---|---|
onExpand | () => void | Promise |
Callback (along with sectionId) that is triggered when section is expanding | |
expandedSection | string or number |
Optional prop to control which AccordionSection (by id ) is expanded |
|
children | React.ChildrenArray<React.Element<typeof AccordionSection>> |
The content of the Accordion. You can use only AccordionSection | |
dataTest | string |
Optional prop for testing purposes | |
loading | boolean |
If true it will render the Loading component |
|
spaceAfter | enum |
Additional margin-bottom after component. See this docs |
AccordionSection
import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
Usage
<Accordion onExpand={onExpand} expanded={expanded}>
<AccordionSection id="0X1">Hello World!</AccordionSection>
</Accordion>
<Accordion loading>
<AccordionSection id="0X1">Loading...</AccordionSection>
</Accordion>
Props
Name | Type | Default | Description |
---|---|---|---|
id | string | number |
Identificator used to determine active section when using with controlled state | |
actions | React.Node |
Actions which will be rendered on the right side | |
children | React.Node |
The content of the AccordionSection. | |
dataTest | string |
Optional prop for testing purposes. | |
expandable | boolean |
true |
If set to false actions will not be displayed |
header | React.Node |
The header of the AccordionSection. Useful when you need different layout than combination of e.g. title and description properties. |
|
footer | React.Node |
The sticky footer of the AccordionSection. Useful for navigation buttons |