React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { useState } from 'react';
import { Accordion, Checkbox, Container, Icon, Stack, Tag, Typography } from '@optimus-web/core';
const MyAccordionComponent = () => {
const [expanded, toggleExpanded] = useState(false);
const [checked, setChecked] = useState(false);
return (
<Accordion
expanded={expanded}
onClick={() => toggleExpanded(!expanded)}
title="Title"
description="Description"
body={
<Container padding={['100', '0']}>
<Body>
This is the body of the accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim
massa nulla, eu maximus ipsum convallis eu. Aliquam erat volutpat.
</Body>
</Container>
}
startSlot={<Icon value={iconName} />}
middleSlot={<Tag variant={tagVariant}>{tagText}</Tag>}
endSlot={<Checkbox name={name} checked={checked} onChange={() => setChecked(!checked)} />}
withHeaderBorder
withBodyBorder
bodyPadding="0"
/>
);
};
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
expanded |
Determines whether the accordion is expanded or collapsed |
boolean |
false |
|
onClick |
Callback function triggered when the accordion is clicked. |
() => void |
- |
|
body |
The content of the accordion body. |
ReactChild |
- |
|
startSlot? |
Optional content to be displayed before the title. |
ReactChild |
undefined |
|
middleSlot? |
@deprecated - use endSlot instead Optional content to be displayed right after the title. |
ReactChild |
undefined |
|
endSlot? |
Optional content to be displayed on the right side of the accordion header. |
ReactChild |
undefined |
|
title |
The main text to be displayed in the accordion header. |
ReactChild |
- |
|
description? |
Optional text to be displayed in the accordion header. |
ReactChild |
undefined |
|
bodyPadding? |
The padding for the accordion body. |
Spacing |
undefined |
|
headerPadding? |
The padding for the accordion header. |
{ top?: Spacing; bottom?: Spacing; left?: Spacing; right?: Spacing; } |
undefined |
|
withBodyBorder? |
Determines whether the accordion body has a border. |
boolean |
false |
|
withHeaderBorder? |
Determines whether the accordion header has a border. |
boolean |
false |
|
arrowPosition? |
Positions the arrow in the accordion |
'left' | 'right' |
right |