Docs
Changed on:
27 June 2024
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.
Initial changelog entry.
fc.accordion
The Accordion Component is a wrapper component that contains the Summary and Details sections used to display:
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]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. |
1{
2 "component": "fc.accordion",
3 "props": {
4 "summary": "Accordion Summary",
5 "details": "Accordion Details"
6 }
7}Language: json
Initial release
The component extension with the
`indent`None
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
