The KdsAccordion provides a way to visually abstract content. This is done with three components:
- A Wrapper - to provide React state context
- A Trigger - to control the accordion
- A Collapse - that animates height to control the abstraction of content
You may place the Trigger and Collapsible components anywhere so long as they are children of the Wrapper. This gives you complete control over the layout.
An advanced example of how these can be used to create a table to expand additional rows is provided as an example.
Installation
npm i @kds-ui/scmfa-accordion
Usage
@import {
KdsAccordion,
KdsAccordionTrigger,
KpAccordionCollapsible
} from '@kds-ui/scmfa-accordion';
...
<KpAccordion expandedByDefault>
<KpAccordionTrigger/>
<KpAccordionCollapsible>
...
</KpAccordionCollapsible>
</KpAccordion>
KpAccordion Props
expandedByDefault: boolean
If the KpAccordionCollapsible should be expanded on mount. Defaults to false.
KpAccordionCollapsible Props
component: string
The rendered html element type.
indent: bool
If the rendered children should be indented. This is useful when the collapsed content is placed inside other accordions to create a visual relationship.
KpAccordionTrigger Props
useIcon: boolean
Determines if the trigger should render a +/- or Show More/Less.
Table Note
Table rows (<tr>) must be a child of tbody and it's direct decedent elements must
be <td> elements or an invalid HTML tree is created. As such, we use Flexbox to
create the table example to remove some of the restrictions imposed by HTML tables.
This allows wrapping a collection of table rows in a React component (Accordion)
that can manage the abstraction as well as enable some styling capability that would
otherwise not work due to how HTML tables handle empty cells, spacings, and gaps if
we used a strict HTML table structure. You may add aria roles to the markup if you
are worried about accessibility or semantics with this approach.