Accordion
Components
Accordion()
Accordion(
props
,context
?):ReactNode
An accordion provides a fast and easy way to create expandable and collapsible sections
anywhere in your app. Its container and content can be easily customized using the
customStyle
and contentStyle
props.
Usage
Parameters
Parameter | Type |
---|---|
props | AccordionProps |
context ? | any |
Returns
ReactNode
Example
const title = (
<Stack align="center" direction="row">
<Avatar
profileId={profileId}
avatar={{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }}
/>
<Text customStyle="ml-2.5">Item name</Text>
</Stack>
);
const content = (
<Stack>
<Text>some interesting items</Text>
<Text>could be placed</Text>
<Text>inside the accordion</Text>
</Stack>
);
<Accordion open={true} accordionId='someId' titleNode={title} contentNode={content} customStyle='w-[15%]' />
Source
libs/design-system-core/src/components/Accordion/index.tsx:47
Props
AccordionProps
AccordionProps:
object
Type declaration
Member | Type |
---|---|
accordionId | string |
contentNode | React.ReactNode |
contentStyle | string |
customStyle | string |
handleClick | (id ) => void |
headerDivider | boolean |
open | boolean |
titleNode | React.ReactNode |
Source
libs/design-system-core/src/components/Accordion/index.tsx:9