Example 1 - Manual control

Use the mouse to click on the available steps. Note that each of them is referenced to a step-content which is the information to be displayed in the context of the step.

Obs: title and ref parameter from step directive are optional.

Example 2 - Controlling the component using StepsAPI

Component can be controlled using an instance of the StepsAPI.init () object. When the API attempts to access a step that is not yet enabled, an error is returned. Open the Console to view the errors.

You can also define any attribute in your step element and get it across the instance.getStepAttributes(currentStep). See an example on line 19 from file app.js: app.js file getting a attribute called "my-attribute" from file index.html on line 58 index.html file.

Example 3 - Settings steps colors

Setting initial colors for the steps using the optional parameter "colors". Caution, in this mode, you only can use HEX colors type. If you want to use rgb, rgba or similar, use StepsAPI.init() instance.

Example 4 - Using Across parameter from Step

You can pass an Object to the Step using "across" parameter and later, rescues it using "myNav.getStepAcrossObject(myNav.getStep());" Something like:

Example 5 - Changing the step using the Application Controller

You can change the value of the step parameter using the Application Controller.

Example 6 - Changing the enabled-step using the Application Controller

You can change the value of the enabled-step parameter using the Application Controller. When the value of the enabled-step is changed and the value of the selected step is greater, the component controller selects the first step automatically.