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