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
10	Show Actions	Boolean	Off	showActions	boolean	false	Show action area in the accordion item
11	Actions Value	[Details 1]		actionsValue	array of object		Action settings for the action area

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 Expanded is set to OFF.
• Accordion items can display an action area where arbitrary actions can be executed by pressing a button.

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
  • Text Area
  • Number Field
  • Select
  • Combobox
  • Button
  • Icon Button
  • Typography
  • Image
  • Link
• 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 3. Detached Action
Text Area	1. None 2. Action 3. Detached Action
Number Field	1. None 2. Action 3. Detached Action
Select	1. None 2. Action 3. Detached Action
Combobox	1. None 2. Action 3. Detached Action
Button	1. None 2. NEXT UI 3. URL 4. Action 5. Detached Action 6. Upload 7. Camera
Icon Button	1. None 2. Action 3. Detached Action 4. Camera
Typography
Image	1. None 2. NEXT UI 3. URL 4. Action 5. Detached Action
Link	1. None 2. Action 3. Detached Action 4. NEXT UI 5. Value 6. Download

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.

[Details 1] Actions Value

In Actions Value, you can configure the details of the buttons displayed in the action area. Launch the grid for Actions Value from the property dialog and set labels, events, etc.

Actions Value Grid

The Actions Value Grid consists of the following columns:

Column	Cell Type	Property	Type	Description
ID	Input	id	string	1. Identifier 2. Must be unique within Actions Value
Label	Input	label	string	Button label
Color	String / Color Picker	color	string	Button color
Variant	Select 1. Contained 2. Outlined 3. Text	variant	string	Button style
Click Event	Select 1. None 2. Action

Note

• Actions for buttons in the action area 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 ID included in Actions Value to launch the Action Editor.