Skip to main content

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

ParameterType
propsAccordionProps
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

MemberType
accordionIdstring
contentNodeReact.ReactNode
contentStylestring
customStylestring
handleClick(id) => void
headerDividerboolean
openboolean
titleNodeReact.ReactNode

Source

libs/design-system-core/src/components/Accordion/index.tsx:9