詳細リスト

詳細リストはアバターとプライマリテキスト、セカンダリーテキスト、サポートテキストからアイテムが構成されるリストです。モバイルアプリケーションなど領域が少ないアプリケーションでの使用が有効です。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	幅	数値	390	width	number	390	コンポーネントの幅
3	高さ	数値	200	height	number	200	コンポーネントの高さ
4	X	数値		x	number		X座標位置
5	Y	数値		y	number		Y座標位置
6	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
7	値	文字列	`[詳細1]`	value	array of object	`[詳細1]`	詳細リストの値
8	クリックイベント	選択 1.なし 2.アクション	アクション				クリック時のイベント設定

[詳細1] 値 (value)

デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	アバター	プライマリ	セカンダリ	サポート	区切り線
チェックボックス	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
チェックボックス	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はオブジェクトの配列形式になります。

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

イベント

イベント名	説明
onclick	クリックした時にアクションを実行します。

[selected]プロパティによって、クリックした行のオブジェクトが取得できます。

項目	例
取得方法	$ui.detailed_list_id.selected
取得値	{“id”:“item1”,“avatar”:“/xxx/xxx/xxx.png”,“primary”:“xxx”,“secondary”:“xxx”,“supporting”:“xxx”,“divider”:“inset”}