Progress Indicator in Lightning Component

Progress Indicator Component:

<!--ProgressIndicator.cmp-->
<aura:component >
    <aura:attribute name="selectedStep" type="string" default="step1"/>
    <div class="slds-m-around_xx-large">
        
        <lightning:progressIndicator currentStep="{!v.selectedStep}" type="base">
            <lightning:progressStep label="Step One" value="step1" onclick="{!c.selectStep1}"/>
            <lightning:progressStep label="Step Two" value="step2" onclick="{!c.selectStep2}"/>
            <lightning:progressStep label="Step Three" value="step3" onclick="{!c.selectStep3}"/>
            <lightning:progressStep label="Step Four" value="step4" onclick="{!c.selectStep4}"/>
        </lightning:progressIndicator>
        
        <div class="slds-p-around--medium">
            <div class="{!v.selectedStep == 'step1' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 1</b></p>
            </div>
            <div class="{!v.selectedStep == 'step2' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 2</b></p>
            </div>
            <div class="{!v.selectedStep == 'step3' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 3</b></p>
            </div>
            <div class="{!v.selectedStep == 'step4' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 4</b></p>
            </div>
        </div>
        
        <div>
            <button disabled="{!v.selectedStep != 'step1' ? '' : 'disabled'}" class="slds-button slds-button--neutral" onclick="{!c.handlePrev}">Back</button>  
            <aura:if isTrue="{!v.selectedStep != 'step4'}">
                <button class="slds-button slds-button--brand" onclick="{!c.handleNext}">Next</button>
            </aura:if>
            <aura:if isTrue="{!v.selectedStep == 'step4'}">   
                <button class="slds-button slds-button--brand" onclick="{!c.handleFinish}">Finish</button>  
            </aura:if>
        </div>
    </div>
</aura:component>

Progress Indicator Component JS Controller:

({
    handleNext : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step1"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step3");
        }
         else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step4");
        }
    },
    
    handlePrev : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step1");
        }
        else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step4"){
            component.set("v.selectedStep", "step3");
        }
    },
    
    handleFinish : function(component,event,helper){
        alert('Finished...');
        component.set("v.selectedStep", "step1");
    },
    
    selectStep1 : function(component,event,helper){
        component.set("v.selectedStep", "step1");
    },
    selectStep2 : function(component,event,helper){
        component.set("v.selectedStep", "step2");
    },
    selectStep3 : function(component,event,helper){
        component.set("v.selectedStep", "step3");
    },
    selectStep4 : function(component,event,helper){
        component.set("v.selectedStep", "step4");
    },
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ProgressIndicator />
</aura:application>

Output:

Note: To create “base” style progress indicator you have need to add type="base" attribute in your lightning:progressIndicator tag in lightning component.

Modal Box in Lightning Component

Modal Popup Component:

<!--ModalPopup.app-->
<aura:component>
    <aura:attribute name="openModal" type="boolean" default="false"/>
    <div class="slds-m-around--xx-large">
        <button class="slds-button slds-button--brand" onclick="{!c.handleOpenModal}">Open Modal</button>  
        <aura:if isTrue="{!v.openModal}">
            <!--Modal Box Start--> 
            <div role="dialog" class="slds-modal slds-fade-in-open ">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}">
                            X
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h1 class="slds-text-heading--medium">Biswajeet Samal</h1>
                    </div>
                    
                    <!--Modal Box Header--> 
                    <div class="slds-modal__content slds-p-around--medium">
                        <center> <p><b>
                            Welcome to Biswajeet Samal's Blog
                            </b>
                            </p></center>
                    </div>
                    <!--Modal Box Button--> 
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div>            
        </aura:if>
    </div>
</aura:component>

Modal Popup Component JS Controller:

({
    handleOpenModal: function(component, event, helper) {
        //For Display Modal, Set the "openModal" attribute to "true"
        component.set("v.openModal", true);
    },
    
    handleCloseModal: function(component, event, helper) {
        //For Close Modal, Set the "openModal" attribute to "fasle"  
        component.set("v.openModal", false);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ModalPopup />
</aura:application>

Output:

Toggle Checkbox in Lightning Component

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="toggleValue" type="String"/>
    <div class="slds-m-around--large">
        <div class="slds-form-element">
            <label class="slds-checkbox_toggle slds-grid">
                <span class="slds-form-element__label slds-m-bottom_none">Toggle Label </span>
                <ui:inputCheckbox aura:id="chkbox" class="slds-input" change="{!c.selectChange}"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
                </span>
            </label>
            <p><b>The toggle is {!v.toggleValue} </b></p>
        </div> 
    </div> 
</aura:component>

Sample Lightning Component JS Controller:

({
    selectChange : function(cmp, event, helper) {
        var checkCmp = cmp.find("chkbox");
        cmp.set("v.toggleValue" ,  checkCmp.get("v.value"));
    }
})

Output:

Expand And Collapse Panel Using Lightning Component

Accordion Component:

<!--Accordion.cmp-->
<aura:component>
    <div class="slds-p-around--large">
        <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.panelOne}">
            <section class="slds-clearfix">
                <div class="slds-float--left ">
                    <lightning:icon class="slds-show" aura:id="panelOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="panelOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left--large">Panel 1</div>
            </section>
        </div>
        
        <div class="slds-hide slds-p-around--medium" aura:id="panelOne">
            Panel 1
        </div>
        
        <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.panelTwo}">
            <section class="slds-clearfix">
                <div class="slds-float--left">
                    <lightning:icon class="slds-show" aura:id="panelTwo" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="panelTwo" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left--large">Panel 2</div>
            </section>
        </div>
        
        <div class="slds-hide slds-p-around--medium" aura:id="panelTwo">
            Panel 2
        </div>
        
        <div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.panelThree}">
            <section class="slds-clearfix">
                <div class="slds-float--left"> 
                    <lightning:icon class="slds-show" aura:id="panelThree" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="panelThree" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left--large">Panel 3</div>
            </section>
        </div>
        
        <div aura:id="panelThree" class="slds-hide slds-p-around--medium">
            Panel 3
        </div>
        
        <div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.panelFour}">
            <section class="slds-clearfix">
                <div class="slds-float--left"> 
                    <lightning:icon class="slds-show" aura:id="panelFour" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="panelFour" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left--large">Panel 4</div>
            </section>
        </div>
        
        <div aura:id="panelFour" class="slds-hide slds-p-around--medium">
            Panel 4
        </div>  
        
                <div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.panelFive}">
            <section class="slds-clearfix">
                <div class="slds-float--left"> 
                    <lightning:icon class="slds-show" aura:id="panelFive" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="panelFive" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left--large">Panel 5</div>
            </section>
        </div>
        
        <div aura:id="panelFive" class="slds-hide slds-p-around--medium">
            Panel 5
        </div>  
    </div>
</aura:component>

Accordion Component JS Controller:

({
    panelOne : function(component, event, helper) {
        helper.toggleAction(component, event, 'panelOne');
    },
    
    panelTwo : function(component, event, helper) {
        helper.toggleAction(component, event, 'panelTwo');
    },
    
    panelThree : function(component, event, helper) {
        helper.toggleAction(component, event, 'panelThree');
    },
    
    panelFour : function(component, event, helper) {
        helper.toggleAction(component, event, 'panelFour');
    },
    
    panelFive : function(component, event, helper) {
        helper.toggleAction(component, event, 'panelFive');
    }
})

Accordion Component JS Helper:

({
    toggleAction : function(component, event, secId) {
        var acc = component.find(secId);
        for(var cmp in acc) {
            $A.util.toggleClass(acc[cmp], 'slds-show');  
            $A.util.toggleClass(acc[cmp], 'slds-hide');  
        }
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Accordion />
</aura:application>

Output: