VlocityDCProgressIndicator

VlocityDCProgressIndicator

vlocity-dc-progress-indicator is a web component used to indicate step progress.

VlocityDCProgressIndicator methods
1. getProgressIconCSS - Method to get progress icon css dynamically.
2. getProgressBarCSS - Method to get progress bar css dynamically.
Features
1. Indicate steps progress.

Constructor

new VlocityDCProgressIndicator()

Source:
Example
Sample Usage -

Include the component in your template by adding <vlocity-dc-progress-indicator> custom tag
<vlocity-dc-progress-indicator checkOutSteps={} stepsCompleted="1"></vlocity-dc-progress-indicator>


--------------------------------------------------------------------------------------------------------------------------------------
 KEY INFO -

 events fired : none

 events registered : none

 Dependency - vlocity-dc-progress-indicator is an independent component and has no dependency on parent component.

               | Parent Component | Expected Child Component  |
               |------------------|---------------------------|
               | none             | none                      |


Sample with slots -

<vlocity-dc-progress-indicator>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</vlocity-dc-progress-indicator>

List of available slots -

| Slot names                            | Dynamic     | Description                 | Impact                    |
|---------------------------------------|-------------|---------------------------------------------------------|
|  dc-each-step                         | -           | Wrapper for each step       | Replaces each step li tag |

Extends

Members

(static) getProgressBarCSS

Method to return progress bar css styles dynamically.
Source:

(static, readonly) properties

Properties that will be available in the binding system
Properties:
Name Type Description
stepsCompleted Boolean total number of steps completed.
checkOutSteps Object checkout steps progress status.
Source: