Lightning コンポーネント開発者ガイド
jlightning:dualListbox
lightning:dualListbox コンポーネントは、横並びの 2 つのリストボックスを表します。左側のリストで 1 つ以上のオプションを選択します。選択したオプションを右側のリストに移動します。選択されたオプションの順序は維持され、オプションは並び替えられます。
このコンポーネントは、Lightning Design System のデュエル選択リストからスタイル設定を継承します。
8 つのオプションを含むシンプルなデュアルリストボックスを作成する例を次に示します。オプションの 7、2、3 は、リストボックスの [2 番目のカテゴリ] で選択されます。オプションの 2 と 7 は必須オプションです。
オプションを読み込み、値の変更を処理するクライアント側コントローラを次に示します。
ユーザが選択できるオプションの数を指定するには、min および max 属性を使用します。たとえば、min を 3 に、max を 8 に設定した場合、ユーザは 3 つのオプションを選択する必要があり、選択できるオプションは 8 つとなります。
使用上の考慮事項
選択された値を取得するには、onchange ハンドラを使用します。
リスト間でオプションを移動するために左および右ボタンをクリックしたとき、または「選択されたオプション」リストでオプションの順序を変更したときに、onchange ハンドラがトリガされます。
アクセシビリティ
デュアルリストボックスの作業では、次のキーボードショートカットを使用します。
- クリック - 1 つのオプションを選択します。
- Cmd + クリック - 複数のオプションを選択、または選択したオプションを選択解除します。
- Shift + クリック - クリックしたオプションと、1 つ前にクリックしていたオプションの間のすべてのオプションを選択します。
オプションがフォーカスされている場合:
- 上矢印 - 選択を前のオプションに移動します。
- 下矢印 - 選択を次のオプションに移動します。
- Cmd / Ctrl + 上矢印 - フォーカスを前のオプションに移動します。
- Cmd / Ctrl + 下矢印 - フォーカスを次のオプションに移動します。
- Ctrl + スペースキー- フォーカスされているオプションの選択を切り替えます。
- Cmd / Ctrl + 右矢印 - 選択したオプションを右のリストボックスに移動します。
- Cmd / Ctrl + 左矢印 - 選択したオプションを左のリストボックスに移動します。
- Tab - フォーカスを次の要素に移動します。
ボタンがフォーカスされている場合:
- Enter - ボタンに関連した動作を実行します。
メソッド
このコンポーネントは、次のメソッドをサポートします。
focus(): フォーカスを要素に設定します。checkValidity(): デュアルリストボックスに有効性エラーがあるかどうかを示す、ValidityState オブジェクトの有効なプロパティ値 (Boolean) を返します。
- message (String): エラーを説明する文字列。メッセージが空の文字列の場合、エラーメッセージはリセットされます。
属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| name | String | 入力要素の名前を指定します。 | はい |
| value | Object | 入力要素の値を指定します。 | |
| variant | String | バリエーションは入力項目の外観を変更します。使用できるバリエーションは standard と label-hidden です。この値のデフォルトは standard です。 | |
| disabled | Boolean | 入力要素を無効にするかどうかを指定します。この値のデフォルトは false です。 | |
| readonly | Boolean | 入力項目が参照のみであることを指定します。この値のデフォルトは false です。 | |
| required | Boolean | フォームを送信する前に入力項目が入力されている必要があることを指定します。この値のデフォルトは false です。 | |
| validity | Object | 制約検証に対して要素が取ることのできる有効性状態を表します。 | |
| onchange | Aura.Action | 値属性が変更された場合にトリガされるアクション。 | |
| accesskey | String | 要素の有効化またはフォーカス設定のためのショートカットキーを指定します。 | |
| tabindex | Integer | 要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。 | |
| onfocus | Aura.Action | 要素にフォーカスが設定されたときにトリガされるアクション。 | |
| onblur | Aura.Action | 要素がフォーカスを解放したときにトリガされるアクション。 | |
| label | String | デュアルリストボックスの表示ラベル。 | はい |
| sourceLabel | String | ソースオプションリストボックスの表示ラベル。 | はい |
| selectedLabel | String | 「選択されたオプション」リストボックスの表示ラベル。 | はい |
| options | Object[] | 選択できるオプションのリスト。各オプションには、label と value 属性が含まれます。 | はい |
| requiredOptions | List | 「選択されたオプション」リストボックスから削除できない必須オプションのリスト。このリストは、options 属性の値から作成されます。 | |
| values | List | 「選択されたオプション」リストボックスに含めるデフォルトオプションのリスト。このリストは、options 属性の値から作成されます。 | |
| min | Integer | 「選択されたオプション」リストボックスに必要な最小オプション数。 | |
| max | Integer | 「選択されたオプション」リストボックスの最大オプション数。 |