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

ui:collapse

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

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

1swfobject.registerObject("clippy.codeblock-0", "9");<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" menuCollapse="{!c.addClass}" menuExpand="{!c.removeClass}">
4            <ui:actionMenuItem aura:id="item1" label="All Contacts" click="{!c.doSomething}"/>
5            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
6        </ui:menuList>
7</ui:menu>

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

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

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

No Results

ui:collapse