基本リスト

基本リストはアイコンと一行文字列だけのシンプルなリストです。モバイルアプリケーションなど領域が少ないアプリケーションでの使用が有効です。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	幅	文字列	390	width	number/string	390	コンポーネントの幅
3	高さ	文字列	220	height	number/string	220	コンポーネントの高さ
4	X	文字列		x	number/string		X座標の位置
5	Y	文字列		y	number/string		Y座標の位置
6	色	文字列		color	string		基本リストの文字色 v3.4.0で追加されたプロパティ
7	背景色	文字列		backgroundColor	string		基本リストの背景色 v3.4.0で追加されたプロパティ
8	アイコン色	文字列		iconColor	string		アイコンの色 v3.4.0で追加されたプロパティ
9	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示状態
10	値	表形式 [詳細1]	[詳細1]	value	object array	[詳細1]	リストアイテムの配列
11	クリックイベント	選択 1. None 2. Action	Action	clickEvent	string	Action	クリック時の動作
12				selected	object		選択されたアイテム（取得専用）

[詳細1] 値 (value)

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

選択	ID	icon	Primary	Divider
チェックボックス	item1	Inbox	Inbox	none
チェックボックス	item2	Drafts	Drafts	none

valueはオブジェクトの配列形式になります。
[{"id":"item1","icon":"Inbox","primary":"Inbox","divider":"none"},{"id":"item2","icon":"Drafts","primary":"Drafts","divider":"none"}]

ノート

• 区切り線のプロパティの選択肢は、none | fullWidth | middle | inset になります。
• アイコンの見た目については以下のURLを参照してください。 https://material-ui.com/components/material-icons/

イベント

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

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

項目	例
取得方法	$ui.basic_list_id.selected
取得値	{“id”:“item1”,“icon”:“Inbox”,“primary”:“Inbox”,“divider”:“none”}