Skip to main content

Accordion

The <Accordion/> component render breadcrumbs that show the user where they are in the site's hierarchy.

Source@matro-ui/accordion

Import​

import { Accordion, AccordionItem, AccordionButton } from "matro-ui";
  • Accordion: The wrapper that provides context and logic to the components
  • AccordionItem: Individual accordion element containing a button.
  • AccordionButton: The button that toggles show/hide state of the accordion item

Usage​

Loading...
Live Editor
<Accordion>
   <AccordionItem>
     <AccordionButton>Accordion Item 1</AccordionButton>
      <i>Content 1</i>
   </AccordionItem>

   <AccordionItem>
     <AccordionButton>Accordion Item 2</AccordionButton>
     <div>Content 2</div>
   </AccordionItem>
</Accordion>

Custom Icon​

You can pass the setIcon prop callback to change the default icon and render it conditionaly based on the props.isOpened argument.

Loading...
Live Editor
<Accordion setIcon={(props) => props.isOpened ? "🚀" : <>😴</>}>
   <AccordionItem>
     <AccordionButton>Item #1</AccordionButton>
     <i>content 1</i>
   </AccordionItem>

   <AccordionItem>
     <AccordionButton>Item #2</AccordionButton>
     <div>content 2</div>
   </AccordionItem>
</Accordion>

Opened by default​

To make the <AccordionItem/> opened by default, pass the isOpened prop to it:

Loading...
Live Editor
<Accordion>
   <AccordionItem isOpened>
     <AccordionButton>Item #1</AccordionButton>
     <b>Hi! I'm opened by default! 👋🏿</b>
   </AccordionItem>
</Accordion>