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

ui:menu

表示を制御するトリガを含むドロップダウンメニューリスト。menuTriggerLink および menuList コンポーネントを指定する必要があります。

ui:menu コンポーネントにはトリガとリスト項目が含まれます。クライアント側コントローラでリスト項目をアクションに関連付けて、項目が選択されるとアクションがトリガされるようにすることができます。次の例では、リスト項目が含まれるメニューを表示し、リスト項目が押されるとトリガの表示ラベルを更新します。

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/>
3        <ui:menuList class="actionMenu" aura:id="actionMenu">
4              <ui:actionMenuItem aura:id="item1" label="Any" click="{!c.updateTriggerLabel}"/>
5              <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}" disabled="true"/>
6              <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/>
7              <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/>
8          </ui:menuList>
9</ui:menu>

このクライアント側コントローラは、メニュー項目がクリックされるとトリガの表示ラベルを更新します。

1({
2    updateTriggerLabel: function(cmp, event) {
3        var triggerCmp = cmp.find("trigger");
4        if (triggerCmp) {
5            var source = event.getSource();
6            var label = source.get("v.label");
7            triggerCmp.set("v.label", label);
8        }
9    }
10})

ドロップダウンメニューとそのメニュー項目は、デフォルトでは非表示になっています。この設定を変更するには、ui:menuList コンポーネントの visible 属性を true に設定します。メニュー項目は、ui:menuTriggerLink コンポーネントをクリックしたときにのみ表示されます。

メニューを開くトリガを使用するには、ui:menuTriggerLink コンポーネントを ui:menu 内にネストします。リスト項目には、ui:menuList コンポーネントを使用し、クライアント側コントローラアクションをトリガできる次のいずれかのリスト項目コンポーネントを含めます。

ui:actionMenuItem - メニュー項目
ui:checkboxMenuItem - 複数選択をサポートするチェックボックス
ui:radioMenuItem - 単一選択をサポートするラジオ項目

これらのメニュー項目に区切り文字を追加するには、ui:menuItemSeparator を使用します。

次の例では、メニューを作成する複数の方法を示します。

1<aura:component access="global">
2    <aura:attribute name="status" type="String[]" default="Open, Closed, Closed Won, Any"/>
3        <ui:menu>
4            <ui:menuTriggerLink aura:id="trigger" label="Single selection with actionable menu item"/>
5            <ui:menuList class="actionMenu" aura:id="actionMenu">
6                <aura:iteration items="{!v.status}" var="s">
7                    <ui:actionMenuItem value="{!s}" label="{!s}" click="{!c.updateTriggerLabel}"/>
8                </aura:iteration>
9            </ui:menuList>
10        </ui:menu>
11        <hr/>
12        <ui:menu>
13        <ui:menuTriggerLink class="checkboxMenuLabel" aura:id="checkboxMenuLabel" label="Multiple selection"/>
14           <ui:menuList aura:id="checkboxMenu" class="checkboxMenu">
15            <aura:iteration items="{!v.status}" var="s">
16                <ui:checkboxMenuItem value="{!s}" label="{!s}"/>
17                </aura:iteration>
18            </ui:menuList>
19        </ui:menu>
20         <p><ui:button class="checkboxButton" aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p>
21          <p><ui:outputText class="result" aura:id="result" value="Which items get selected"/></p>
22 <hr/>
23         <ui:menu>
24             <ui:menuTriggerLink class="radioMenuLabel" aura:id="radioMenuLabel" label="Select a status"/>
25             <ui:menuList class="radioMenu" aura:id="radioMenu">
26                    <aura:iteration items="{!v.status}" var="s">
27                     <ui:radioMenuItem label="{!s}" value="{!s}"/>
28                    </aura:iteration>
29             </ui:menuList>
30         </ui:menu>
31        <p><ui:button class="radioButton" aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p>
32         <p><ui:outputText class="radioResult" aura:id="radioResult" value="Which items get selected"/> </p>
33 <hr/>
34 <div style="margin:20px;">
35     <div style="display:inline-block;width:50%;vertical-align:top;">
36         Combination menu items
37         <ui:menu>
38             <ui:menuTriggerLink aura:id="mytrigger" label="Select Menu Items"/>
39             <ui:menuList>
40                 <ui:actionMenuItem label="Red" click="{!c.updateLabel}" disabled="true"/>
41                 <ui:actionMenuItem label="Green" click="{!c.updateLabel}"/>
42                 <ui:actionMenuItem label="Blue" click="{!c.updateLabel}"/>
43                 <ui:actionMenuItem label="Yellow United" click="{!c.updateLabel}"/>
44                 <ui:menuItemSeparator/>
45                 <ui:checkboxMenuItem label="A"/>
46                 <ui:checkboxMenuItem label="B"/>
47                 <ui:checkboxMenuItem label="C"/>
48                 <ui:checkboxMenuItem label="All"/>
49                 <ui:menuItemSeparator/>
50                 <ui:radioMenuItem label="A only"/>
51                 <ui:radioMenuItem label="B only"/>
52                 <ui:radioMenuItem label="C only"/>
53                 <ui:radioMenuItem label="None"/>
54             </ui:menuList>
55         </ui:menu>
56       </div>
57 </div>
58</aura:component>

1({
2    updateTriggerLabel: function(cmp, event) {
3        var triggerCmp = cmp.find("trigger");
4        if (triggerCmp) {
5            var source = event.getSource();
6            var label = source.get("v.label");
7            triggerCmp.set("v.label", label);
8        }
9    },
10    updateLabel: function(cmp, event) {
11        var triggerCmp = cmp.find("mytrigger");
12        if (triggerCmp) {
13            var source = event.getSource();
14            var label = source.get("v.label");
15            triggerCmp.set("v.label", label);
16        }
17    },
18    getMenuSelected: function(cmp) {
19        var menuCmp = cmp.find("checkboxMenu");
20        var menuItems = menuCmp.get("v.childMenuItems");
21        var values = [];
22        for (var i = 0; i < menuItems.length; i++) {
23            var c = menuItems[i];
24            if (c.get("v.selected") === true) {
25                values.push(c.get("v.label"));
26            }
27        }
28        var resultCmp = cmp.find("result");
29        resultCmp.set("v.value", values.join(","));
30    },
31    getRadioMenuSelected: function(cmp) {
32        var menuCmp = cmp.find("radioMenu");
33        var menuItems = menuCmp.get("v.childMenuItems");
34        var values = [];
35        for (var i = 0; i < menuItems.length; i++) {
36            var c = menuItems[i];
37            if (c.get("v.selected") === true) {
38                values.push(c.get("v.label"));
39            }
40        }
41        var resultCmp = cmp.find("radioResult");
42        resultCmp.set("v.value", values.join(","));
43    }
44})

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。

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

ui:menu

属性

イベント