Lightning components development becomes faster with out of box lightning components

Last few blogs was on custom functionality and I thought should write on out of box components in Lightning framework. When we started development on lightning framework some months back, we had to develop few components from scratch which are available in platform now. we will just go through few out of box lightning components which makes development on lightning framework much faster.

Lightning Icon - lightning:icon
Lightning icon makes it easier to add SVG to your lightning components. You could specify IconName, class, size and variant(warning, error), alternative text and body.


Lightning Tabset and Lightning Tab - lightning:tabset & lightning:tab
Lightning Tabset is parent for lightning Tab. As most of you already know that we can accommodate multiple tab into tabset. we could pass variant(default, scopped), onSelect event, Id, class and body to the lightningning tabset. Lightning tab will be child of lightning tabset, we could pass few events like onblur, onfocus. Also, can customize the label like Icon with description etc. Possible attributes are body, tabindex etc.

Lightning Button Menu and Menu Item - lightning:buttonMenu and lightning:menuItem
Button Menu represents a drop down menu which the component itself will take care of the javasript to show or hide the menu, the event handling part. Many attributes available to customise the out of box component like class, iconName, iconSize, menuAlignment, title, value , events like onblur, onfocus, onselect. You can use the visible attribute to open and close the menu from controller/Helper.

A lightning:menuItem is a menu item within the lightning:buttonMenu dropdown component. It can hold state such as checked or unchecked, and can contain icons. You can customize the styling using the class attribute. You can create menu items that can be checked or unchecked using the checked attribute in the lightning:menuItem component. Other possible attributes are iconNmae, label, title, value and events like onblur, onfocus.


Lightning Spinner - lightning:spinner
Displays an animated spinner. This component can be used when retrieving data or anytime an operation doesn't immediately complete. The variant attribute changes the appearance of the spinner. The default spinner color is dark blue.


There are many components available in the framework like lightning:button, lightning:button:group, lightning:buttonicon, lightning:textarea, lightning:select, lightning:formatteddatetime, lightning:formattednumber, lightning:layout, lightning:card etc. If you want to know more about it, then refer the link Aura Component reference

Screenshots:

Lightning Icon

Lightning Tab

Lightning Menu

Lightning Spinner

Follow me @ramsujesh