Accordion Component
Changed on:
27 June 2024
Overview
The Accordion component is a Mystique content component that can expand to show its child components. It is useful for hiding details with the ability to pull it up when needed.
| Plugin Name | Core |
|---|
The standard library of mystique components.
v1.0.0
Initial changelog entry.
Alias
fc.accordion
Detailed technical description
The Accordion Component is a wrapper component that contains the Summary and Details sections used to display:
- Plain text
- Template
- Set of components
The Summary section is always visible.
The Details section could be expanded from the Summary by clicking on it.
1{
2 "component": "fc.accordion",
3 "props": {
4 "summary": "Accordion Summary",
5 "details": "Accordion Details"
6 }
7}Language: plain_text
Name: Plain Text
Description:
[Warning: empty required content area]1{
2 "component": "fc.accordion",
3 "props": {
4 "summary": "{{someTemplate}}",
5 "details": "{{someTemplate2}}"
6 }
7}Language: plain_text
Name: Template
Description:
[Warning: empty required content area]1{
2 "component": "fc.accordion",
3 "props": {
4 "summary": [
5 {
6 "component": "fc.mystique.collapsible.text",
7 "props": {
8 "text": "Text example",
9 "charCutoff": 50
10 }
11 }
12 ],
13 "details": [
14 {
15 "component": "fc.mystique.collapsible.text",
16 "props": {
17 "text": "Text example",
18 "charCutoff": 50
19 }
20 },
21 {
22 "component": "fc.mystique.collapsible.text",
23 "props": {
24 "text": "Text example",
25 "charCutoff": 50
26 }
27 }
28 ]
29 }
30}Language: plain_text
Name: Set of components
Description:
[Warning: empty required content area]Properties
Name | Type | Required | Default | Description |
expandIcon | | No | true | Displays or hides the expand icon in the Summary section. |
expanded | | No |
| Forces opened or closed state of the Accordion component. |
defaultExpanded | | No | false | Indicates a predefined state of the Accordion component, allowing change it. |
disabled | | No | false | Restricts interaction with the Accordion component. |
summary | | No |
| Text, template, or an array of custom components to be displayed in the Summary section. |
details | | No |
| Text, template, or an array of custom components to be displayed in the Details section. |
indent | | No | true | Padding switcher, which allows removal of the extra padding in the Details section when using nested components. |
Configuration example
1{
2 "component": "fc.accordion",
3 "props": {
4 "summary": "Accordion Summary",
5 "details": "Accordion Details"
6 }
7}Language: json
Version History
24.4.22
Initial release
v24.7.22
The component extension with the
`indent`Recommended Placement
None
