AccordionItem

Install

yarn add @ntds/accordion

Import

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

AccordionItem

Prop	Type & 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 Default value: "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	IconProps 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