Lightning Design System Link: Click here
Create a Lightning Component 'lightningPathExample.cmp' with the following code.
- Note that each li tag represents a path and in our example has three paths hence three li tag's. Also note that each li tag has a aura:id attribute. We will use this in javascript to mark a path as complete or incomplete
Now, let's add a javascript function to mark step one as complete and step two as current. We will call this javascript function from a lightning button. Add the following code to the 'lightningPathExampleController.js'
Now, let's add some coloring and change the current path to orange. We will also change the complete path to gray.