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

ui:expand

メニューコンポーネントが展開されていることを示します。

たとえば、ui:menuList コンポーネントはこのイベントを登録し、その起動時に処理します。

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:registerEvent name="menuExpand"  type="ui:expand"
18
19                    description="The event fired when the menu list displays." />

このイベントは ui:menuList コンポーネントインスタンスで処理できます。次の例に、2 つのリスト項目があるメニューコンポーネントを示します。ここでは、ui:collapse および ui:expand イベントを処理します。

1<ui:menu>
2
3    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
4
5        <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addClass}" menuExpand="{!c.removeClass}">
6
7            <ui:actionMenuItem aura:id="item1" label="All Contacts" click="{!c.doSomething}"/>
8
9            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
10
11        </ui:menuList>
12
13</ui:menu>

このクライアント側のコントローラは、メニューが折りたたまれるとトリガに CSS クラスを追加し、メニューが展開されるとそのクラスを削除します。

1({
2
3    addClass : function(component, event, helper) {
4
5        var trigger = component.find("trigger");
6
7        $A.util.addClass(trigger, "myClass");
8
9    },
10
11    removeClass : function(component, event, helper) {
12
13        var trigger = component.find("trigger");
14
15        $A.util.removeClass(trigger, "myClass");
16
17    }
18
19})

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

ui:expand