本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/example

我们在实际项目中有的时候要使用展示类似opportunity path的这种进度的标签,当然 lwc已经给做好了标签和demo,我们第一版进行一个简单的制作。直接上代码

testProgressIndicator.html

<template>
    <lightning-card title="path demo">
        <lightning-layout>
            <lightning-layout-item size="12" class="slds-float--right">
                <lightning-button onclick={handlePreviousStepAction} variant="brand" label="Previous" disabled={disablePrevious} class="slds-m-right_x-small slds-no-flex text-right ">
                </lightning-button>
                <lightning-button onclick={handleNextStepAction} variant="brand" label="Next" disabled={disableEnd} class="slds-m-right_x-small slds-no-flex text-right ">
                </lightning-button>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-progress-indicator current-step={currentStep} type="path" >
            <template for:each={stepsForProgress} for:item="step">
                <lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
            </template>
        </lightning-progress-indicator>
    </lightning-card>
</template>
12-11 07:53