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!
No comments:
Post a Comment