Accordion
The Accordion component allows the user to show and hide sections of associated content on a page.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| actions | bool | false | If enabled, displays the Accordion Action settings. |
| disabled | bool | false | If true, the component is disabled. |
| expanded | code | Allows the user to add additional code to control the expansion functionality of the component. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| square | bool | false | If true, disables rounded corners on the component. |
Subcomponents
The Accordion component consists of several subcomponents that define various aspects of an accordion's content.
Accordion Summary
The Accordion Summary component provides a title for the content within the details section of the accordion and an expansion indicator to expand the accordion.
| Name | Type | Default | Description |
|---|---|---|---|
| expandIcon | node | down arrow | Defines the icon to display as the expand indicator. |
| margin | string | The margin space around the accordion summary content. | |
| padding | string | The padding space around the accordion summary content. | |
| font | serif sans-serif monospaced arial arial black verdana times new roman didot georgia american typewriter courier monaco bradley hand string | Defines the font face for the title. | |
| size | string | Defines the size of the accordion summary component in pixels. | |
| color | href #ffffff rgb 5,5,5 string | Defines the color of the accordion summary component. |
Accordion Details
The Accordion Details component provides a surface to display additional information through other components, such as a Card, Typography or Text component.
| Name | Type | Default | Description |
|---|---|---|---|
| margin | string | The margin space around the accordion details content. | |
| padding | string | The padding space around the accordion details content. | |
| font | serif sans-serif monospaced arial arial black verdana times new roman didot georgia american typewriter courier monaco bradley hand string | Defines the font face for the detail text. | |
| size | string | Defines the size of the accordion details component in pixels. | |
| color | href #ffffff rgb 5,5,5 string | Defines the color of the accordion details component. |
Accordion Actions
The Accordion Actions component allows for the placement of Button components to perform actions related to the accordion's function. By default, when the accordion actions are enabled, both the Cancel and OK buttons are added to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| disableSpacing | bool | false | If true, removes additional margin spacing around the actions. |
| margin | string | The margin space around the accordion actions content. | |
| padding | string | The padding space around the accordion actions content. | |
| font | serif sans-serif monospaced arial arial black verdana times new roman didot georgia american typewriter courier monaco bradley hand string | Defines the font face for the actions component. | |
| size | string | Defines the size of the accordion actions component in pixels. | |
| color | href #ffffff rgb 5,5,5 string | Defines the color of the accordion actions component. |
For more detail on the Accordion component, see the MUI developer docs.