カスタムリスト
カスタムリストは、リストアイテムとしてリストアイテムコンポーネントを追加しカスタムすることができるコンポーネントです。
追加したコンポーネントからのアクションの実行も可能です。
v3.3.0で追加されました。
| No | リストアイテムコンポーネント |
|---|---|
| 1 | テキスト入力 |
| 2 | テキストエリア |
| 3 | 数値入力 |
| 4 | 高精度数値 |
| 5 | 検索フィールド |
| 6 | パスワード入力 |
| 7 | セレクトボックス |
| 8 | コンボボックス |
| 9 | 日付ピッカー |
| 10 | 日時ピッカー |
| 11 | 時刻ピッカー |
| 12 | ラジオボタン |
| 13 | ラジオボタングループ |
| 14 | チェックボックス |
| 15 | チェックボックスグループ |
| 16 | スイッチ |
| 17 | レーティング |
| 18 | スライダー |
| 19 | ボタン |
| 20 | タイポグラフィー |
| 21 | リッチテキスト |
| 22 | イメージ |
| 23 | 外部リソース |
| 24 | リンク |
| 25 | ボックス |
| 26 | 区切り線 |
プロパティ
| No | 項目 | 入力値 | デフォルト値 | アクションプロパティ | タイプ | アクションデフォルト値 | 説明 |
|---|---|---|---|---|---|---|---|
| 1 | ID | 文字列 | 自動設定 | id | string | 自動設定 | [id]プロパティはアクションで設定はできません。 |
| 2 | 幅 | 文字列 | 640 390 [モバイル] | width | string | 640 390 [モバイル] | コンポーネントの幅 |
| 3 | 高さ | 文字列 | 640 | height | string | 640 | コンポーネントの高さ |
| 4 | X | 文字列 | x | string | X座標位置 | ||
| 5 | Y | 文字列 | y | string | Y座標位置 | ||
| 6 | リスト行の高さ | 数値 | 240 | listItemHeight | number | 240 | リスト行の高さ |
| 7 | 背景色 | 文字列 カラーピッカー | backgroundColor | string | 背景色 | ||
| 8 | 選択時の背景色 | 文字列 カラーピッカー | selectedBackgroundColor | string | リスト行選択時の背景色 | ||
| 9 | 区切り線 | 選択 1. None 2. Full Width 3. Middle 4. Inset | None | divider | string | None | 区切り線表示設定 |
| 10 | スクロールバー | 真偽 | OFF | switch | boolean | false | スクロールバーの表示設定 |
| 11 | 表示 | 真偽 | ON | visibility | boolean | true | コンポーネントの表示設定 |
| 12 | 値 | 表形式[詳細1] | value | array of object | カスタムリストの値 | ||
| 13 | クリックイベント | 選択 1. なし 2. アクション | アクション | [クリックイベントなしの場合]リストアイテムコンポーネント内のアクションのみ有効になります。 [クリックイベント アクションの場合]リスト行クリック時のアクションのみ有効となります。 | |||
| 14 | 選択値 | selected | object | 選択されているリスト行のデータ[selected]プロパティはアクションで設定はできません。 |
[詳細1] 値 (value)
カスタムリストの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、チェックボックスを選択して、[削除]ボタンをクリックします。
| text_field_1 | button_1 | typography_1 |
|---|---|---|
| Text_1 | Button_1 | Description_1 |
| Text_2 | Button_2 | Description_2 |
| Text_3 | Button_3 | Description_3 |
アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとカスタムリストの各コンポーネントにデータ表示できます。同様に値 (value) にはテーブルの現在の表示データの状態がオブジェクトの配列形式で入っています。
[ {"text_field_1":"Text_1","button_1":"Button_1","typography_1":"Description_1"}, {"text_field_1":"Text_2","button_1":"Button_2","typography_1":"Description_2"}, {"text_field_1":"Text_3","button_1":"Button_3","typography_1":"Description_3"}]| No | リストアイテムコンポーネント | 対応するプロパティ |
|---|---|---|
| 1 | テキスト入力 | value |
| 2 | テキストエリア | value |
| 3 | 数値入力 | value |
| 4 | 高精度数値 | value |
| 5 | 検索フィールド | value |
| 6 | パスワード入力 | value |
| 7 | セレクトボックス | value |
| 8 | コンボボックス | value |
| 9 | 日付ピッカー | value |
| 10 | 日時ピッカー | value |
| 11 | 時刻ピッカー | value |
| 12 | ラジオボタン | value |
| 13 | ラジオボタングループ | value |
| 14 | チェックボックス | value |
| 15 | チェックボックスグループ | value |
| 16 | スイッチ | value |
| 17 | レーティング | value |
| 18 | スライダー | value |
| 19 | ボタン | label |
| 20 | タイポグラフィー | value |
| 21 | リッチテキスト | value |
| 22 | イメージ | value |
| 23 | 外部リソース | value |
| 24 | リンク | label |
| 25 | ボックス | - |
| 26 | 区切り線 | - |
[詳細2]リスト行のアクションからクリック行を取得する場合
リスト行のクリックアクションとリスト行内のコンポーネントのアクションではイベント発生行を選択値(selected)プロパティによって取得できます。
選択値(selected)は選択した行データを取得することができるプロパティとなります。
カスタムリストのイベントで、選択値(selected)プロパティにより要素数1の行オブジェクトが取得できます。
イベント
| イベント名 | 説明 |
|---|---|
| onclick | リスト行をクリックした際に発生します。 |