Accordion

Accordion is a UI component that allows you to expand and collapse multiple sections. It is mainly used for organizing information and making effective use of screen space.
Added in v4.0.0.

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto	id	string	Auto	The [id] property cannot be set by actions.
2	Width	String	600	width	string	600	Width of the accordion
3	Height	String	200	height	string	200	Height of the accordion
4	X	String		x	string
5	Y	String		y	string
6	Lock	Boolean	OFF	lock	boolean	false	When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0.
7	Visibility	Boolean	On	visibility	boolean	true
8	Color	String Color Picker		color	string		Text color of the accordion title. If empty, the theme’s Primary Text color is applied.
9	BackgroundColor	String Color Picker		backgroundColor	string		Background color of the entire accordion. If empty, the theme’s Background Paper color is applied.
10	Multi Expand	Boolean	On	multiExpand	boolean	true	If Off, opening one section will close the others.

Note

• For the Width and Height properties, you can enter the following: To display in px, enter only a number. To display in %, specify % as the unit.
  Behavior for values other than the following is not supported.
  • Number
  • Number%
  • calc() function
• For the X and Y properties, you can enter the following:
  To display in px, specify only a number.
  Behavior for values other than the following is not supported.
  • Number
  • calc() function
• The calc() function is a CSS function that allows calculations. (e.g., calc(100% - 30px))
  Units that can be used with the calc() function are ”%” and “px”. Other units (e.g., em, rem) are not supported.
• When specifying size using the calc() function, the display in the editor and the appearance in the app may differ.
  Please check using the preview.

Adding Accordion Items

An accordion item refers to a single expandable section within the accordion component.
You can add accordion items to the accordion component by following the steps below.

1. Open the property dialog of the accordion component.
2. Click the + icon on the accordion bar in the left pane.
3. An accordion item will be added to the left pane.