Basic List

The basic list is a simple list with only an icon and a one-line string. It is effective for use in applications with small space requirements, such as mobile applications.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by action.
2	Width	String	390	width	number/string	390	Component width
3	Height	String	220	height	number/string	220	Component height
4	X	String		x	number/string		X coordinate position
5	Y	String		y	number/string		Y coordinate position
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	Color	Color Picker		color	string		Component text color. Added in v3.4.0.
8	Icon Color	Color Picker		iconColor	string		Icon color. Added in v3.4.0.
9	Background Color	Color Picker		backgroundColor	string		Background color. Added in v3.4.0.
10	Visibility	Boolean	ON	visibility	boolean	true	Component visibility state
11	Value	Table [Details 1]	[Details 1]	value	object array	[Details 1]	List items array
12	Click Event	Selection 1. None 2. Action 3. Detached Action	Action				Click behavior Detached Action became selectable in v4.1.0.
13				selected	object		Selected item (read-only)
14	Detached Action	Selection 1. [Detached Action ID]		detachedAction	string		Set a detached action Added in v4.1.0.

[Details 1] Value

The default status is registered as follows. Register from the "Add" button. To delete, select the check box and click the "Delete" button.

Selection	ID	icon	Primary	Divider
Checkbox	item1	Inbox	Inbox	none
Checkbox	item2	Drafts	Drafts	none

"value" is in the form of an array of objects.
[{"id":"item1","icon":"Inbox","primary":"Inbox","divider":"none"},{"id":"item2","icon":"Drafts","primary":"Drafts","divider":"none"}]

Note

• The property choices for the divider are none | fullWidth | middle | inset.
• Please refer to the following URL for more information on the appearance of icons. https://material-ui.com/components/material-icons/

Event

Event name	Description
onclick	Performs an action when clicked.

The "selected" property allows you to retrieve the object in the row you clicked on.

Item	Example
Acquisition method	$ui.basic_list_id.selected
Obtained value	{“id”:“item1”,“icon”:“Inbox”,“primary”:“Inbox”,“divider”:“none”}