Collapse

ui:collapse

Indicates that the ui:menuList component is collapsed.

This event is fired when you collapse the ui:menuList component. To set a handler for the ui:collapse event, use the menuCollapse attribute on ui:menuList.

The following example adds or remove a CSS class to the ui:menuList component when it’s collapsed or expanded.

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

Here’s the client-side controller that handles the adding and removing of the CSS classes.

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});

If you’re using this event with a component other than ui:menuList, register the event first.

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

No specifications to show

Collapse

Lightning Component Reference