0.0.5 • Published 5 years ago
@volvo-cars/accordion-component v0.0.5
Accordion
Basic usage
<Accordion label="Accordion example">
<Block as="p">...text</Block>
</Accordion>
Usage with parent state
const MultipleControlledAccordions = () => {
const [active, setActive] = useState(-1);
return (
<>
{times(4).map((d, i) => (
<Accordion
label={`Accordion example ${i + 1}`}
key={i}
onChange={() => setActive(i)}
isOpen={i === active}
>
<Content />
</Accordion>
))}
</>
);
};
Props
Props | Type | Description | Required | Default |
---|---|---|---|---|
label | string | Label | ✔︎ | null |
children | jsx | Children for the Accordion's expandable content section | ✔︎ | null |
onChange | func | Callback fired when accordion open state is changed | null | |
extend | object | Extend styles of accordion | null | |
extendContent | object | Extend styles of accordion content | null |