この文章は 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 <div style="margin:20px;">
3     <div style="display:inline-block;width:50%;vertical-align:top;">
4         ui:actionMenuItem
5         <ui:menu>
6             <ui:menuTriggerLink aura:id="trigger" label="Select your favorite team"/>
7              <ui:menuList class="actionMenu" aura:id="actionMenu">
8                 <ui:actionMenuItem class="actionItem1" aura:id="actionItem1" label="Bayern Munich" click="{!c.updateTriggerLabel}"/>
9                 <ui:actionMenuItem class="actionItem2" aura:id="actionItem2" label="FC Barcelona" click="{!c.updateTriggerLabel}" disabled="true"/>
10                 <ui:actionMenuItem class="actionItem3" aura:id="actionItem3" label="Inter Milan" click="{!c.updateTriggerLabel}"/>
11                 <ui:actionMenuItem class="actionItem4" aura:id="actionItem4" label="Manchester United" click="{!c.updateTriggerLabel}"/>
12             </ui:menuList>
13         </ui:menu>
14      </div>
15     
16 </div>
17 <hr/>
18 <p/>
19 <div style="margin:20px;">
20     <div style="display:inline-block;width:50%;vertical-align:top;">
21         ui:checkboxMenuItem
22         <ui:menu>
23             <ui:menuTriggerLink class="checkboxMenuLabel" aura:id="checkboxMenuLabel" label="Select your favorite teams"/>
24            <ui:menuList aura:id="checkboxMenu" class="checkboxMenu">
25                 <ui:checkboxMenuItem class="checkboxItem1" aura:id="checkboxItem1" label="San Francisco 49ers"/>
26                 <ui:checkboxMenuItem class="checkboxItem2" aura:id="checkboxItem2" label="Seattle Seahawks"/>
27                 <ui:checkboxMenuItem class="checkboxItem3" aura:id="checkboxItem3" label="St. Louis Rams"/>
28                 <ui:checkboxMenuItem class="checkboxItem4" aura:id="checkboxItem4" label="Arizona Cardinals" disabled="true" selected="true"/>
29             </ui:menuList>
30         </ui:menu>
31         <p><ui:button class="checkboxButton" aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p>
32          <p><ui:outputText class="result" aura:id="result" value="Which items get selected"/></p>
33       </div>
34 </div>
35 <hr/>
36 <p/>
37 <div style="margin:20px;">
38     <div style="display:inline-block;width:50%;vertical-align:top;">
39         ui:radioMenuItem
40         <ui:menu>
41             <ui:menuTriggerLink class="radioMenuLabel" aura:id="radioMenuLabel" label="Select a team"/>
42             <ui:menuList class="radioMenu" aura:id="radioMenu">
43                 <ui:radioMenuItem class="radioItem1" aura:id="radioItem1" label="San Francisco"/>
44                 <ui:radioMenuItem class="radioItem2" aura:id="radioItem2" label="LA Dodgers"/>
45                 <ui:radioMenuItem class="radioItem3" aura:id="radioItem3" label="Arizona"/>
46                 <ui:radioMenuItem class="radioItem4" aura:id="radioItem4" label="Diego" disabled="true"/>
47                 <ui:radioMenuItem class="radioItem5" aura:id="radioItem5" label="Colorado"/>
48             </ui:menuList>
49         </ui:menu>
50        <p><ui:button class="radioButton" aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p>
51         <p><ui:outputText class="radioResult" aura:id="radioResult" value="Which items get selected"/> </p>
52        </div>
53 </div>
54 <hr/>
55 <p/>
56 <div style="margin:20px;">
57     <div style="display:inline-block;width:50%;vertical-align:top;">
58         Combination menu items
59         <ui:menu>
60             <ui:menuTriggerLink aura:id="mytrigger" label="Select teams"/>
61             <ui:menuList>
62                 <ui:actionMenuItem label="Bayern Munich" click="{!c.updateLabel}"/>
63                 <ui:actionMenuItem label="FC Barcelona" click="{!c.updateLabel}"/>
64                 <ui:actionMenuItem label="Inter Milan" click="{!c.updateLabel}"/>
65                 <ui:actionMenuItem label="Manchester United" click="{!c.updateLabel}"/>
66                 <ui:menuItemSeparator/>
67                 <ui:checkboxMenuItem label="San Francisco 49ers"/>
68                 <ui:checkboxMenuItem label="Seattle Seahawks"/>
69                 <ui:checkboxMenuItem label="St. Louis Rams"/>
70                 <ui:checkboxMenuItem label="Arizona Cardinals"/>
71                 <ui:menuItemSeparator/>
72                 <ui:radioMenuItem label="San Francisco"/>
73                 <ui:radioMenuItem label="LA Dodgers"/>
74                 <ui:radioMenuItem label="Arizona"/>
75                 <ui:radioMenuItem label="San Diego"/>
76                 <ui:radioMenuItem label="Colorado"/>
77             </ui:menuList>
78         </ui:menu>
79       </div>
80 </div>
81</aura:component>

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

属性

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

イベント

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

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

ui:menu

属性

イベント