Accordion Item

An Accordion Item is an element that constitutes an individual section within an Accordion component, which can be expanded or collapsed.
It does not exist as an independent component, but only as a child element of the Accordion component.
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	Label	String		label	string		Summary string of the accordion item
3	Expanded Height	Number		expandedHeight	number		Height when the accordion item is expanded
4	Expanded Gap	Number		expandedGap	number		Gap to the next accordion item when expanded
5	Background Color	String Color Picker		backgroundColor	string		Background color of the accordion item
6	Label Color	String Color Picker		labelColor	string		Label color of the accordion item summary
7	Expanded	Select 1. ON 2. OFF	OFF	expanded	boolean	false	Expansion state of the accordion item
8	Disabled	Select 1. ON 2. OFF	OFF	disable	boolean	false	Active state of the accordion item
9	Visibility	Select 1. ON 2. OFF	OFF	visibility	boolean	false	Visibility state of the accordion item

Note

• The order of accordion items can be changed by drag & drop in the property dialog.
• If the Multi Expand property of the accordion is set to ON, it will expand even if Expended is set to OFF.

Accordion Item Components

Components placed in an accordion item are called Accordion Item Components.
Accordion Item Components can be added to an accordion item by the following steps:

1. Click the + icon on the accordion item bar.
2. The component addition dialog will appear.
3. Select the desired component and click the ADD button.

Note

• The following components can be added as Accordion Item Components:
  • Text Field
  • Button
  • Typography
  • Image
• The order of Accordion Item Components can be changed by drag & drop in the property dialog.
• When Accordion Item Components overlap, the one with the higher order is displayed in the front.
• If the X or Y of an Accordion Item Component is greater than the Accordion component’s width or the expanded height, a scrollbar will appear in the accordion item area.

Accordion Item Component Properties

Components added to an accordion item have the following additional properties compared to normal components:

• Component Type
• X
• Y

Note

• Component Type cannot be changed.
• X and Y are relative values with the top-left of the accordion item as (0, 0).

Also, the following values can be set for the click or change events of Accordion Item Components:

Component	Click or Change Event Options
Text Field	1. NONE 2. ACTION
Button	1. NONE 2. NEXT UI 3. URL 4. ACTION 5. UPLOAD
Typography
Image	1. NONE 2. NEXT UI 3. URL 4. ACTION

Note

• Actions for Accordion Item Components can be written by launching the editor from the context menu of the Accordion component.
• Right-click the Accordion component - select Action and choose the desired Accordion Item Component ID to launch the Action Editor.