Image List

The Image List is a component that displays images in a tiled format. Set the file manager path to the image you want to display.

Note

• The Image List is a display-only component and no actions can be set.
• File extensions that can be displayed in the image list are gif, jpg, and png.
• Video files cannot be displayed. Image files with animation in gif files can be displayed.

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 actions.
2	Width	Number	488	width	number	488	Component width
3	Height	Number	160	height	number	160	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		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	Cols	Number	3	col	number	3	Number of columns to display
8	Gap	Number	4	gap	number	4	Gap width between images
9	Icon Color	String		iconColor	string		Icon color displayed when no image is set. Added in v3.4.0.
10	Background Color	String		backgroundColor	string		Background color displayed when no image is set. Added in v3.4.0.
11	Object Fit	Selection 1.Cover 2.Contain 3.None	Cover	objectFit	string	cover	Image display method
12	Cache Disabled	Boolean	OFF	cacheDisabled	boolean	false	Cache usage state for image Added in v4.1.0.
13	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide
14	Value	Table format [Detail 1]	[Detail 1]	value	array of object	[Detail 1]	Image list value

Note

• "Value" is the path to the file manager.
• Right-click on the image cell under "value" to make a file manager selection.

[Details 1] Value

Click the "Add" button to register.
To delete, select the check box and click the "Delete" button.
The image is set to the path of the file manager.

Select	ID	Image
Checkbox	img1	/img_101.jpg
Checkbox	img2	/img_102.jpg
Checkbox	img3	/img_103.jpg

"value" is in the form of an array of objects.
[[{"id":"img1","image":"/img_101.jpg"},{"id":"img2","image":"/img_102.jpg"},{"id":"img3","image":"/img_103.jpg"}]]

Event

None