Accordion - goobz22/goobs-frontend GitHub Wiki

Accordion Component

The Accordion component is a collapsible panel that can be used to organize and present content in a compact and expandable manner.

Importing the Component

To use the Accordion component in your project, import it from the goobs-frontend package:

import { Accordion, AccordionSummary, AccordionDetails } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the Accordion component:

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from 'goobs-frontend';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const AccordionExample: React.FC = () => {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography>Accordion 1</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget.
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
};

export default AccordionExample;

Props

Accordion Props

The Accordion component accepts all props from the Material-UI Accordion component. Here are some commonly used props:

  • defaultExpanded: boolean - If true, expands the accordion by default.
  • disabled: boolean - If true, the accordion will be displayed in a disabled state.
  • expanded: boolean - If true, expands the accordion. Use this when you want to control the expanded state.
  • onChange: function(event: React.SyntheticEvent, expanded: boolean) => void - Callback fired when the expand/collapse state is changed.

AccordionSummary Props

The AccordionSummary component accepts all props from the Material-UI AccordionSummary component. Some key props include:

  • expandIcon: ReactNode - The icon to display as the expand indicator.
  • IconButtonProps: object - Props applied to the IconButton element wrapping the expand icon.

AccordionDetails Props

The AccordionDetails component accepts all props from the Material-UI AccordionDetails component.

Styling

You can customize the appearance of the Accordion component using the sx prop or styled-components. Here's an example of custom styling:

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from 'goobs-frontend';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const CustomAccordion: React.FC = () => {
  return (
    <Accordion
      sx={{
        backgroundColor: '#f0f0f0',
        '&:hover': {
          backgroundColor: '#e0e0e0',
        },
      }}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
        sx={{
          '& .MuiAccordionSummary-content': {
            color: '#333',
          },
        }}
      >
        <Typography>Custom Styled Accordion</Typography>
      </AccordionSummary>
      <AccordionDetails
        sx={{
          backgroundColor: '#fff',
          padding: '16px',
        }}
      >
        <Typography>
          This is a custom styled accordion with different background colors and padding.
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
};

export default CustomAccordion;

Advanced Usage

Controlled Accordion

You can create a controlled accordion by managing the expanded state yourself:

import React, { useState } from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from 'goobs-frontend';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const ControlledAccordion: React.FC = () => {
  const [expanded, setExpanded] = useState<string | false>(false);

  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
    setExpanded(isExpanded ? panel : false);
  };

  return (
    <div>
      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>Controlled Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Content for controlled accordion 1
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>Controlled Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Content for controlled accordion 2
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
};

export default ControlledAccordion;

Nested Accordions

You can create nested accordions for more complex content organization:

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from 'goobs-frontend';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const NestedAccordions: React.FC = () => {
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>Parent Accordion</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>Nested Accordion 1</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>Content for nested accordion 1</Typography>
          </AccordionDetails>
        </Accordion>
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>Nested Accordion 2</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>Content for nested accordion 2</Typography>
          </AccordionDetails>
        </Accordion>
      </AccordionDetails>
    </Accordion>
  );
};

export default NestedAccordions;

Accessibility

The Accordion component is designed with accessibility in mind. It uses the appropriate ARIA attributes to ensure screen readers can understand the structure and state of the accordion. However, you should always provide meaningful labels and ensure that your content is accessible.

Best Practices

  1. Use clear and concise labels for accordion summaries.
  2. Avoid putting too much content in a single accordion to prevent overwhelming the user.
  3. Consider using controlled accordions when you need to manage complex state or integrate with other components.
  4. Use custom styling thoughtfully to maintain consistency with your overall design system.
  5. Test your accordions with keyboard navigation and screen readers to ensure they are fully accessible.

By following these guidelines and exploring the various props and customization options, you can create flexible and user-friendly accordion components in your goobs-frontend projects.

⚠️ **GitHub.com Fallback** ⚠️