Detailed List

The detailed list is a list consisting of items from the avatar, primary text, secondary text, and supporting text. 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 actions.
2	Width	Number	390	width	number	390	Component width
3	Height	Number	200	height	number	200	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide
7	Value	String	`[Details 1]`	value	array of object	`[Details 1]`	Detailed list value
8	Click Event	Selection 1.None 2.Action	Action				Event setting for click

[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.

Select	ID	Avatar	Primary	Secondary	Support	Divider
Checkbox	item1	https://template-ui-image.webperformer.jp/image/Avatar.png	Brunch this weekend?	Ali Connors	— I will be in your neighborhood doing errands this…	inset
Checkbox	item2	https://template-ui-image.webperformer.jp/image/Avatar.png	Summer BBQ	to Scott, Alex, Jennifer	— Wish I could come, but Im out of town this…	inset

"value" is in the form of an array of objects.

[
  {
    "id": "item1",
    "avatar": "https://template-ui-image.webperformer.jp/image/Avatar.png",
    "primary": "Brunch this weekend?",
    "secondary": "Ali Connors",
    "supporting": " — I will be in your neighborhood doing errands this…",
    "divider": "inset"
  },
  {
    "id": "item2",
    "avatar": "https://template-ui-image.webperformer.jp/image/Avatar.png",
    "primary": "Summer BBQ",
    "secondary": "to Scott, Alex, Jennifer",
    "supporting": " — Wish I could come, but Im out of town this…",
    "divider": "inset"
  }
]

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.detailed_list_id.selected
Obtained value	{“id”:“item1”,“avatar”:“/xxx/xxx/xxx.png”,“primary”:“xxx”,“secondary”:“xxx”,“supporting”:“xxx”,“divider”:“inset”}