本篇参考: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