Salesforce Lightning Web Component Progress Indicator

Salesforce Lightning Web Component Progress Indicator

lightning-progress-indicator can be used in Salesforce Lightning Web Componet to give a visual indication on the progress of a particular process.

Sample Code:

Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-p-around_medium">
            <lightning-progress-indicator 
                current-step={currentStep}
                type="path"
                variant="base">
                <lightning-progress-step 
                    label="Step One" 
                    value="step1">
                </lightning-progress-step>
                <lightning-progress-step 
                    label="Step Two" 
                    value="step2">
                </lightning-progress-step>
                <lightning-progress-step 
                    label="Step Three" 
                    value="step3">
                </lightning-progress-step>
            </lightning-progress-indicator>
            <br/><br/>
            <lightning-tabset variant="scoped">
                <lightning-tab 
                    label="Item One"
                    name="step1"
                    onactive={handleClick}> 
                    Content for Tab 1
                </lightning-tab>
                <lightning-tab 
                    label="Item Two"
                    name="step2"
                    onactive={handleClick}> 
                    Content for Tab 2
                </lightning-tab>
                <lightning-tab 
                    label="Item Three"
                    name="step3"
                    onactive={handleClick}> 
                    Content for Tab 3
                </lightning-tab>
            </lightning-tabset>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';
export default class sampleLightningWebComponent extends LightningElement {

    currentStep;

    handleClick( event ) {

        console.log( 
            event.target.label 
        );
        console.log(
            event.target.name 
        );

        this.currentStep = event.target.name;

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply