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.

Properties

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	Color	Color Picker		color	string		Component color
7	Icon Color	Color Picker		iconColor	string		Icon color
8	Background Color	Color Picker		backgroundColor	string		Background color
9	Selected Background Color	Color Picker		selectedBackgroundColor	string		Background color when selected
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	Action	clickEvent	string	Action	Click behavior
13				selected	object		Selected item (read-only)

[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"}]

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”}