Change color and stage of Lightning Path Component with javascript controller and CSS

11:20 PM

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.

Add the following CSS code to 'lightningPathExample.css'