詳細リスト

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

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
幅	数値		390
高さ	数値		200
X	数値
Y	数値
表示	真偽	• オン • オフ	オン
値	文字列		詳細1
クリックイベント	選択	• なし • アクション	アクション

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
幅	width	number		390
高さ	height	number		200
X	x	number
Y	y	number
表示	visibility	boolean	• true • false	true
値	value	array of object		詳細1

Tips

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

Tips

イベント

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

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

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