Component with picklist after clicking icon

Question

I'm new to Lightning Components development and I'm learning it from the scratch. I hope you'll help me or advise me :)

My goal is to make a custom component. Something like this:

So far I have only text input field with an svg icon on the left. I don't have idea how to make some picklist showing any content that appears after clicking my svg icon with scrollable attribute. Which technology i should use? Or maybe there are existing components with such a functionality?

I do very want to learn lightning components, but I find it very difficult and I'dont have a clue how to connect things properly.

Best regards! :)

Answer 1

The Easiest approach here would be use to the newly introduced lightning:menuItem tag from winter 17. Reference for lightning:menuItem. This component makes use of the menu styles from lightning design system library. Furthermore this component has an attribute for the icon as well. Menu Styles from Lightning Design System Library

So we should be able to make use of all the icons from lightning design system library as per our convenience. However do bear in mind that this tag is under Beta so you might want to analyze the integrity before you ship it to production.

Kindly note that using lightning:menuButton and lightning:menuItem has some restrictions such as

• Icons will appear only on the right side
• lightning:buttons only take utiltu icons, you will not be able to use custom icons and standard action icons.

Other approach will be to use to the mark-up from lightning design system Menu's to implement this requirement. This will use aura:html and when you click on the icon, use an event handler to toggle the focus of the menu item and the component should work just fine.

For toggling the menu on-click, we just have to toggle the class "slds-is-open" in the event handler as follows

This should work but you might have to add some custom styling to make the elements sit as per your expectation.