基本リスト

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

プロパティ

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	位置固定	真偽	OFF	lock	boolean	false	ONの場合は画面をスクロールしてもコンポーネントが固定されて表示されます。 OFFの場合は画面をスクロールするとそれに合わせてコンポーネントも動きます。 v4.1.0で追加されたプロパティ
7	色	文字列		color	string		基本リストの文字色 v3.4.0で追加されたプロパティ
8	背景色	文字列		backgroundColor	string		基本リストの背景色 v3.4.0で追加されたプロパティ
9	アイコン色	文字列		iconColor	string		アイコンの色 v3.4.0で追加されたプロパティ
10	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示状態
11	値	表形式 [詳細1]	[詳細1]	value	object array	[詳細1]	リストアイテムの配列
12	クリックイベント	選択 1. なし 2. アクション 3. 切り離されたアクション	Action				クリック時の動作 切り離されたアクションはv4.1.0で選択可能になりました。
13				selected	object		選択されたアイテム（取得専用）
14	切り離されたアクション	選択 1.[切り離されたアクションのID]		detachedAction	string		切り離されたアクションを設定 v4.1.0で追加されたプロパティ。

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