Skip to content

Latest commit

 

History

History
120 lines (90 loc) · 3.5 KB

accordion.mdx

File metadata and controls

120 lines (90 loc) · 3.5 KB
Raw

import { graphql } from 'gatsby';

import Callout from '../../components/Callout'; import ComponentApi from '../../components/ComponentApi'; import ReactPlayground from '../../components/ReactPlayground';

import Basic from '../../examples/Accordion/Basic'; import AllCollapse from '../../examples/Accordion/AllCollapse'; import Flush from '../../examples/Accordion/Flush'; import AlwaysOpen from '../../examples/Accordion/AlwaysOpen'; import CustomToggle from '../../examples/Accordion/CustomToggle.js'; import ContextAwareToggle from '../../examples/Accordion/ContextAwareToggle.js';

Accordion

Build vertically collapsing accordions in combination with the Collapse component.

Examples

Click the accordions below to expand/collapse the accordion content.

Basic Example

Fully Collapsed State

If you want your Accordion to start in a fully-collapsed state, then simply don't pass in a defaultActiveKey prop to Accordion.

Flush

Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Always open

You can make accordion items stay open when another item is opened by using the alwaysOpen prop. If you're looking to control the component, you must use an array of strings for activeKey or defaultActiveKey.

Custom Accordions

You can still create card-based accordions like those in Bootstrap 4. You can hook into the Accordion toggle functionality via useAccordionButton to make custom toggle components.

Custom Toggle

Custom Toggle with Expansion Awareness

You may wish to have different styles for the toggle if it's associated section is expanded, this can be achieved with a custom toggle that is context aware and also takes advantage of the useAccordionButton hook.

API

useAccordionButton

import { useAccordionButton } from 'react-bootstrap/AccordionButton';

const decoratedOnClick = useAccordionButton(eventKey, onClick);

export const query = graphqlquery AccordionQuery { Accordion: componentMetadata(displayName: { eq: "Accordion" }) { ...ComponentApi_metadata } AccordionItem: componentMetadata(displayName: { eq: "AccordionItem" }) { ...ComponentApi_metadata } AccordionHeader: componentMetadata(displayName: { eq: "AccordionHeader" }) { ...ComponentApi_metadata } AccordionBody: componentMetadata(displayName: { eq: "AccordionBody" }) { ...ComponentApi_metadata } AccordionButton: componentMetadata(displayName: { eq: "AccordionButton" }) { ...ComponentApi_metadata } AccordionCollapse: componentMetadata( displayName: { eq: "AccordionCollapse" } ) { ...ComponentApi_metadata } };