この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:dualListbox

入力リストボックスを提供するウィジェットであり、選択可能なオプションのリストボックスが含まれます。選択されたオプションの順序は保存されます。このコンポーネントでは、API バージョン 41.0 以降が必要です。

lightning:dualListbox コンポーネントは、横並びの 2 つのリストボックスを表します。左側のリストで 1 つ以上のオプションを選択します。選択したオプションを右側のリストに移動します。選択されたオプションの順序は維持され、オプションは並び替えられます。

このコンポーネントは、Lightning Design System のデュエル選択リストからスタイル設定を継承します。

8 つのオプションを含むシンプルなデュアルリストボックスを作成する例を次に示します。オプションの 7、2、3 は、リストボックスの [2 番目のカテゴリ] で選択されます。オプションの 2 と 7 は必須オプションです。

1<aura:component>
2    <aura:attribute name="listOptions" type="List" default="[]"/>
3    <aura:attribute name="defaultOptions" type="List" default="[]"/>
4    <aura:attribute name="requiredOptions" type="List" default="[]"/>
5    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
6    <lightning:dualListbox aura:id="selectOptions" name="Select Options"  label= "Select Options" 
7                           sourceLabel="Available Options" 
8                           selectedLabel="Selected Options" 
9                           options="{! v.listOptions }"
10                           value="{! v.defaultOptions }"
11                           requiredOptions="{! v.requiredOptions }"
12                           onchange="{! c.handleChange }"/>
13</aura:component>

オプションを読み込み、値の変更を処理するクライアント側コントローラを次に示します。

1/** Client-Side Controller **/
2({
3    initialize: function (component, event, helper) {
4        var options = [
5            { value: "1", label: "Option 1" },
6            { value: "2", label: "Option 2" },
7            { value: "3", label: "Option 3" },
8            { value: "4", label: "Option 4" },
9            { value: "5", label: "Option 5" },
10            { value: "6", label: "Option 6" },
11            { value: "7", label: "Option 7" },
12            { value: "8", label: "Option 8" },
13        ];
14        var values = ["7", "2", "3"];
15        var required = ["2", "7"];
16        component.set("v.listOptions", options);
17        component.set("v.defaultOptions", values);
18        component.set("v.requiredOptions", required);
19    },
20    handleChange: function (cmp, event) {
21        // Get the list of the "value" attribute on all the selected options
22        var selectedOptionsList = event.getParam("value");
23        alert("Options selected: '" + selectedOptionsList + "'");
24    }
25})

ユーザが選択できるオプションの数を指定するには、min および max 属性を使用します。たとえば、min を 3 に、max を 8 に設定した場合、ユーザは 3 つのオプションを選択する必要があり、選択できるオプションは 8 つとなります。

使用上の考慮事項

選択された値を取得するには、onchange ハンドラを使用します。

1({
2    onChange: function (cmp, event) {
3    // Retrieve an array of the selected options
4    var selectedOptionValue = event.getParam("value");
5    }
6})

リスト間でオプションを移動するために左および右ボタンをクリックしたとき、または「選択されたオプション」リストでオプションの順序を変更したときに、onchange ハンドラがトリガされます。

アクセシビリティ

デュアルリストボックスの作業では、次のキーボードショートカットを使用します。

クリック - 1 つのオプションを選択します。
Cmd + クリック - 複数のオプションを選択、または選択したオプションを選択解除します。
Shift + クリック - クリックしたオプションと、1 つ前にクリックしていたオプションの間のすべてのオプションを選択します。

オプションがフォーカスされている場合:

上矢印 - 選択を前のオプションに移動します。
下矢印 - 選択を次のオプションに移動します。
Cmd / Ctrl + 上矢印 - フォーカスを前のオプションに移動します。
Cmd / Ctrl + 下矢印 - フォーカスを次のオプションに移動します。
Ctrl + スペースキー- フォーカスされているオプションの選択を切り替えます。
Cmd / Ctrl + 右矢印 - 選択したオプションを右のリストボックスに移動します。
Cmd / Ctrl + 左矢印 - 選択したオプションを左のリストボックスに移動します。
Tab - フォーカスを次の要素に移動します。

ボタンがフォーカスされている場合:

Enter - ボタンに関連した動作を実行します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。

checkValidity(): デュアルリストボックスに有効性エラーがあるかどうかを示す、ValidityState オブジェクトの有効なプロパティ値 (Boolean) を返します。

setCustomValidity(message): デュアルリストボックス値の送信時に表示するカスタムエラーメッセージを設定します。

message (String): エラーを説明する文字列。メッセージが空の文字列の場合、エラーメッセージはリセットされます。

showHelpMessageIfInvalid(): フォームコントロールが無効な状態の場合、ヘルプメッセージを表示します。

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`name`	String	入力要素の名前を指定します。	はい
`value`	Object	入力要素の値を指定します。
`variant`	String	バリエーションは入力項目の外観を変更します。使用できるバリエーションは standard と label-hidden です。この値のデフォルトは standard です。
`disabled`	Boolean	入力要素を無効にするかどうかを指定します。この値のデフォルトは false です。
`readonly`	Boolean	入力項目が参照のみであることを指定します。この値のデフォルトは false です。
`required`	Boolean	フォームを送信する前に入力項目が入力されている必要があることを指定します。この値のデフォルトは false です。
`validity`	Object	制約検証に対して要素が取ることのできる有効性状態を表します。
`onchange`	Action	値属性が変更された場合にトリガされるアクション。
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`label`	String	デュアルリストボックスの表示ラベル。	はい
`sourceLabel`	String	ソースオプションリストボックスの表示ラベル。	はい
`selectedLabel`	String	「選択されたオプション」リストボックスの表示ラベル。	はい
`options`	Object[]	選択できるオプションのリスト。各オプションには、label と value 属性が含まれます。	はい
`requiredOptions`	List	「選択されたオプション」リストボックスから削除できない必須オプションのリスト。このリストは、options 属性の値から作成されます。
`values`	List	「選択されたオプション」リストボックスに含めるデフォルトオプションのリスト。このリストは、options 属性の値から作成されます。
`min`	Integer	「選択されたオプション」リストボックスに必要な最小オプション数。
`max`	Integer	「選択されたオプション」リストボックスの最大オプション数。

Lightning コンポーネント開発者ガイド

lightning:dualListbox

属性