Accordion
Accordion component is use to display large amount of content in a compress and progressive way.
Examples
Default
some header
Button
some header
This is just a placeholder
Compact
some header
some header
some header
onExpand / onCollapse
some header
Close
const OnExpandExample = () => {const [label, setLabel] = useState('Close')return (<Accordion heading="some header" description="Description" buttonLabel={label} info="Secondary info" onExpand={() => setLabel('Open')} onCollapse={() => setLabel('Close')} ><div>This is just a placeholder</div></Accordion>)}
API
Name | Type | Default |
---|---|---|
heading | string | undefined Accordion title | - |
description | string | undefined Accordion description | - |
info | string | undefined Accordion information | - |
buttonLabel | string | undefined Accordion button label | - |
variant | 'compact' | 'default' Accordion variant | default |
defaultExpanded | boolean | undefined | false |
onExpand | callback | undefined Execute callback function on accordion expand | - |
onCollapse | callback | undefined Execute callback function on accordion collapse | - |