Accordion.Item
Install
yarn add @ntds/accordionImport
import { Accordion } from '@ntds/accordion';Usage
<Accordion tw={{ sizing: 'max-w-sm' }}>
<Accordion.Item
headingLevel={2}
title='Title'
details={() => (
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
)}
/>
<Accordion.Item
headingLevel={2}
title='What does Lorem ipsum?'
details={() => (
<>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Tristique nostra eget nisl tortor ex placerat habitasse et.</p>
<p>Suspendisse vulputate pretium laoreet eu posuere ligula cursus ornare suscipit ipsum risus himenaeos elit suspendisse.</p>
</>
)}
/>
</Accordion>Props
| Prop | Type | Default | Description |
|---|---|---|---|
headingLevel | HeadingLevel | — | The heading level to use in-context. The level used will not change the appearance or style. 1 = <h1> 2 = <h2> ... and so on |
noHeading? | boolean | — | Render a <span> instead of <H> tag |
title | ReactNode | — | The summary text that is always shown. When clicked, will expand the detail section. |
startOpen? | boolean | false | Whether or not to render the AccordionItem expanded by default The user can still close it. |
open? | boolean | — | Whether or not to render the AccordionItem expanded or not This property let you control the openness of the accordion item programmatically. |
onChange? | (open: boolean) => void | — | Fires when the internal Accordion.Item state changes to enable feedback to external state. |
tw? | TwGroupKeys | — | Tailwind overrides for the container-element |
twDetails? | TwGroupKeys | — | Tailwind overrides for the expanded details container |
twIconWrapper? | string | — | Tailwind overrides for icon (mx-3) |
twChevronWrapper? | string | — | Tailwind overrides for chevron icon the mx-3 |
details | () => ReactNode | — | Usually simple text, but can be anything. |
large? | boolean | — | larger text |
icon? | ReactNode | — | choose icon |
twHeadingColor? | string | — | color for heading |
twContainerColor? | string | — | color for container |
twFontWeightHeading? | "font-normal" | "font-medium" | "font-bold" | — | font-size for heading font-normal, font-medium, font-bold |
twContainerPadding? | string | — | padding for container |
twContainerTextColor? | string | — | textcolor for container |
twFontWeightContainer? | "font-normal" | "font-medium" | "font-bold" | — | font-size for heading font-normal, font-medium, font-bold |