Skip to main content

Accordion

The Accordion component is a versatile expandable panel that can contain various types of content and actions.

Python Dash Example​

Below is an example of how to use the Accordion component in a Python Dash application.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Box(
        sx={"padding": "20px", "display": "flex", "flexDirection": "column", "gap": "20px"},
        children=[
            dmc.Accordion(
                id="example-accordion",
        items=[
          {
            "title": "Panel 1",
            "content": "This is the content of panel 1. You can put any text or components here.",
            "actions": dmc.Button("Action")
          },
          {
            "title": "Panel 2",
            "content": "This is the content of panel 2. The panel expands when clicked."
          }
        ]
      ),
      # Example using Typography components
      dmc.Accordion(
        id="typography-accordion",
        items=[
          {
            "title": dmc.Typography("Section Title", variant="h6"),
            "content": dmc.Typography(
              "This content uses Typography component for better text styling and consistency. "
              "You can customize the appearance using different variants and styles.",
              variant="body1"
            ),
            "actions": dmc.Button("Learn More")
          }
        ]
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table​

Below are the props for the Accordion component:

| Prop | Type | Default | Description | | -------- | --------------- | ----------- | ------------------------------------------- | ----------------------------------------------------------- | | id | string | None | Unique identifier for the accordion. | | items | AccordionItem[] | [] | Array of items to display in the accordion. | | expanded | string | false | None | The expanded state of the accordion (controlled component). |

AccordionItem Type​

| Property | Type | Description | | ------------ | --------------- | --------------------------------------------------- | ------------------------------------------------ | | title | string | React.ReactNode | The title/header content of the accordion panel. | | content | string | React.ReactNode | The main content of the accordion panel. | | actions | React.ReactNode | Optional actions to display at the bottom of panel. |

For more information about the underlying component, refer to the official MUI documentation:

MUI Accordion Documentation