Thursday, 13 July 2017

Using ui:collapse in Lightning Component #Salesforce


Here I am going to use ui:collapse, if you trying to add a functionality of hover or Accordion this can be a big help, here we are using ui:collapse , ui:menu, ui:menutriggerLink in which we have some child functions also, You can handle this event in a ui:menuList component instance. This example shows a menu component with two list items. It handles the ui:collapse and ui:expand events.
So here it is, you will have one or two link like below, on the click of which user will have a hover where by ui:actionmenuitem we can call other functions.


And using ui:collapse and other tags, we can achieve this



To achieve the above look and feel and the functionality

Here is the component code of the lightning component,

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    
    <aura:registerEvent name="menuCollapse"  type="ui:collapse" description="The event fired when the menu list collapses." />
    
    <html>
        <body>
            <div class="accordion">
                <ui:menu>
                    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
                    <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
                        <div class="accordion">
                            <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <ui:actionMenuItem aura:id="item1" label="Go to Contacts" click="{!c.doSomething}"/>
                        </div>
                    </ui:menuList>
                </ui:menu>
            </div>
            
            <div class="accordion">
                <ui:menu>
                    <ui:menuTriggerLink aura:id="trigger" label="Acounts"/>
                    <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
                        <div class="accordion">
                            <p>aliquip ex ea commodo consequat.</p>
                            <ui:actionMenuItem aura:id="item1" label="Go to Accounts" click="{!c.doSomething}"/>
                        </div>
                    </ui:menuList>
                </ui:menu>
            </div>
        </body>
        
    </html>
</aura:component>


Here is the controller

({
  
    addMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.addClass(trigger, "myClass");
    },
    removeMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.removeClass(trigger, "myClass");
    }

})


Here is css code

.THIS .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.THIS .accordion:hover {
    background-color: #ddd; 
}

Now to test, create one sample app and preview it.


Hope it helps, feel free ask any queries.
Thank you!
Posted by at
Labels: , , , , , , , , ,

2 comments:

Subscribe to: Post Comments (Atom)