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

ui:collapse

メニューコンポーネントが折りたたまれていることを示します。

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

1<aura:registerEvent name="menuCollapse"  type="ui:collapse"
2                    description="The event fired when the menu list collapses." />

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

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

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

1({
2    addMyClass : function(component, event, helper) {
3        var trigger = component.find("trigger");
4        $A.util.addClass(trigger, "myClass");
5    },
6    removeMyClass : function(component, event, helper) {
7        var trigger = component.find("trigger");
8        $A.util.removeClass(trigger, "myClass");
9    }
10})

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

ui:collapse