Lightning コンポーネント開発者ガイド
jui:menu
表示を制御するトリガを含むドロップダウンメニューリスト。クリック可能なリンクやメニュー項目を作成するには、ui:menuTriggerLink および ui:menuList コンポーネントを使用します。
ui:menu コンポーネントにはトリガとリスト項目が含まれます。Lightning Design System のスタイル設定を適用するには、ui:menu の代わりに lightning:buttonMenu を使用することをお勧めします。
クライアント側コントローラでリスト項目をアクションに関連付けて、項目が選択されるとアクションがトリガされるようにすることができます。次の例では、リスト項目が含まれるメニューを表示し、リスト項目が押されるとトリガの表示ラベルを更新します。
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 - 単一選択をサポートするラジオ項目
次の例では、メニューを作成する複数の方法を示します。Lightning Design System のスタイル設定を適用するには、ui:menu の代わりに lightning:buttonMenu を使用することをお勧めします。
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 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 aura:id="checkbox" items="{!v.status}" var="s">
16 <ui:checkboxMenuItem 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 aura:id="radio" items="{!v.status}" var="s">
27 <ui:radioMenuItem label="{!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 menuItems = cmp.find("checkbox");
20 var values = [];
21 for (var i = 0; i < menuItems.length; i++) {
22 var c = menuItems[i];
23 if (c.get("v.selected") === true) {
24 values.push(c.get("v.label"));
25 }
26 }
27 var resultCmp = cmp.find("result");
28 resultCmp.set("v.value", values.join(","));
29 },
30 getRadioMenuSelected: function(cmp) {
31 var menuItems = cmp.find("radio");
32 var values = [];
33 for (var i = 0; i < menuItems.length; i++) {
34 var c = menuItems[i];
35 if (c.get("v.selected") === true) {
36 values.push(c.get("v.label"));
37 }
38 }
39 var resultCmp = cmp.find("radioResult");
40 resultCmp.set("v.value", values.join(","));
41 }
42})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | ユーザがコンポーネントをダブルクリックすると起動されるイベント。 |
| mouseover | COMPONENT | ユーザがコンポーネント���マウスポインタを重ねると起動されるイベント。 |
| mouseout | COMPONENT | ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。 |
| mouseup | COMPONENT | ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。 |
| mousemove | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| click | COMPONENT | ユーザがコンポーネントをクリックすると起動されるイベント。 |
| mousedown | COMPONENT | ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。 |