@ds-kit/accordion
v1.2.2
Published
Accordion component
Downloads
7
Readme
title: "Accordion" slug: "/packages/accordion" category: "control" componentNames:
- "Accordion"
- "AccordionPanel"
Accordion
Accordions can be used to hide additional information while displaying only the headings for each item.
import { Accordion, AccordionPanel } from "@ds-kit/accordion"
Basic Accordion
<Accordion>
<AccordionPanel header="Panel 1">
<P>
Datastory.org is a new platform for data storytelling. We make the world’s
most important information available for free through beautiful apps and
stories.
</P>
</AccordionPanel>
<AccordionPanel header="Panel 2">
<P>
Datastory.org is a new platform for data storytelling. We make the world’s
most important information available for free through beautiful apps and
stories.
</P>
</AccordionPanel>
<AccordionPanel header="Panel 3">
<P>
Datastory.org is a new platform for data storytelling. We make the world’s
most important information available for free through beautiful apps and
stories.
</P>
</AccordionPanel>
<AccordionPanel header="Panel 4">
<P>
Datastory.org is a new platform for data storytelling. We make the world’s
most important information available for free through beautiful apps and
stories.
</P>
</AccordionPanel>
</Accordion>
Accordion with custom Header component
<Accordion>
<AccordionPanel header={<Heading size="xs">Panel 1</Heading>}>
<Div mt="1rem" mb="2rem" ml="1rem">
<P>
Datastory.org is a new platform for data storytelling. We make the
world’s most important information available for free through beautiful
apps and stories.
</P>
</Div>
</AccordionPanel>
<AccordionPanel header={<Heading size="xs">Panel 2</Heading>}>
<Div mt="1rem" mb="2rem" ml="1rem">
<P>
Datastory.org is a new platform for data storytelling. We make the
world’s most important information available for free through beautiful
apps and stories.
</P>
</Div>
</AccordionPanel>
<AccordionPanel header={<Heading size="xs">Panel 3</Heading>}>
<Div mt="1rem" mb="2rem" ml="1rem">
<P>
Datastory.org is a new platform for data storytelling. We make the
world’s most important information available for free through beautiful
apps and stories.
</P>
</Div>
</AccordionPanel>
<AccordionPanel header={<Heading size="xs">Panel 4</Heading>}>
<Div mt="1rem" mb="2rem" ml="1rem">
<P>
Datastory.org is a new platform for data storytelling. We make the
world’s most important information available for free through beautiful
apps and stories.
</P>
</Div>
</AccordionPanel>
</Accordion>