Element: <ins-steps>
Renders a sequence of steps that can guide users through the task.
Code Snippet
<ins-steps> <ins-step description="Shipping"> </ins-step> <ins-step description="Payment"> </ins-step> <ins-step description="Summary"> </ins-step> </ins-steps>
Code Snippet
<ins-steps> <ins-step></ins-step> <ins-step></ins-step> <ins-step></ins-step> </ins-steps>
Code Snippet
<ins-steps indicator="number"> <ins-step></ins-step> <ins-step></ins-step> <ins-step></ins-step> </ins-steps>
Code Snippet
<ins-steps> <ins-step complete></ins-step> <ins-step active></ins-step> <ins-step></ins-step> </ins-steps>
Code Snippet
<ins-steps inline> <ins-step complete description="Shipping"> </ins-step> <ins-step active description="Payment"> </ins-step> <ins-step description="Summary"> </ins-step> </ins-steps>
Code Snippet
<ins-steps> <ins-step icon="icon-truck" description="Shipping"> </ins-step> <ins-step icon="icon-credit-card" description="Payment"> </ins-step> <ins-step icon="icon-clipboard" description="Summary"> </ins-step> </ins-steps>
Code Snippet
<ins-steps> <ins-step description="Shipping" active has-error> </ins-step> <ins-step description="Payment" complete has-error> </ins-step> <ins-step description="Summary" has-error> </ins-step> </ins-steps>
Code Snippet
<ins-steps clickable id="insStepsClickEl"> <ins-step description="Shipping"> </ins-step> <ins-step description="Payment"> </ins-step> <ins-step description="Summary"> </ins-step> </ins-steps> <script> // Check console for event log insStepsClickEl.addEventListener('insClick', console.log); </script>
Code Snippet
<ins-steps id="insStepsEl"> <ins-step description="Account"> </ins-step> <ins-step description="Shipping"> </ins-step> <ins-step description="Payment"> </ins-step> <ins-step description="Summary"> </ins-step> </ins-steps> <div class="spacer"></div> <ins-button label="Prev" solid id="prevBtn" disabled> </ins-button> <ins-button label="Next" solid id="nextBtn"> </ins-button> <ins-button label="Go to step 2" solid id="goToStep2"> </ins-button> <ins-button label="Finish" solid id="finish"> </ins-button> <ins-button label="Start Again" solid id="startAgain"> </ins-button> <script> let insStepsEl = document.getElementById("insStepsEl"); let prevBtn = document.getElementById("prevBtn"); let nextBtn = document.getElementById("nextBtn"); let finish = document.getElementById("finish"); let goToStep2 = document.getElementById("goToStep2"); let startAgain = document.getElementById("startAgain"); startAgain.addEventListener('insClick', async () => { insStepsEl.reset(); prevBtn.disabled = true; nextBtn.disabled = false; }); finish.addEventListener('insClick', () => { insStepsEl.finish(); prevBtn.disabled = false; nextBtn.disabled = true; }); goToStep2.addEventListener('insClick', () => { insStepsEl.setStep(2) prevBtn.disabled = false; nextBtn.disabled = false; }); // Use async await when calling APIs if you are expecting a return from the API // Check the console to see the track prevBtn.addEventListener('insClick', async () => { nextBtn.disabled = false; let track = await insStepsEl.prev(); console.log('prev', track); if (track.start) prevBtn.disabled = true; }); nextBtn.addEventListener('insClick', async () => { prevBtn.disabled = false; let track = await insStepsEl.next(); console.log('next', track) if (track.end) nextBtn.disabled = true; if (track.previousStep.description === "Shipping"){ track.previousStep.hasError = true; } }); </script>
<ins-steps>
Attributes
FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
---|---|---|---|---|
indicator | string | - | number | Renders the step’s indicator as numbers |
inline | boolean | false | true, false | Renders the step’s description inline with the indicators |
clickable | boolean | false | true, false | Renders the steps to be clickable |
<ins-steps>
Event
NAME | OBJECT | DESCRIPTION |
---|---|---|
insClick | { start: boolean, end: boolean, previousStep: html node, currentStep: html node } |
Emits an event when steps are clickable |
<ins-steps>
API
NAME | PARAMETERS | RETURN | DESCRIPTION |
---|---|---|---|
next | - | { end: boolean, previousStep: html_node, currentStep: html_node } |
This will complete the current step and activate the next step |
prev | - | { start: boolean, previousStep: html_node, currentStep: html_node } |
This will deactivate the current step and activate the previous step |
finish | - | true | This will complete all steps and activate the last step |
setStep | place of step | { previousStep: html_node, currentStep: html_node } |
This will deactivate the current step and activate the step given in the parameter |
getAllSteps | - | List of all ins-step elements |
This will return all ins-step provided. |
<ins-step>
Attributes
FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
---|---|---|---|---|
icon | string | - | Insites Font Icons | Renders indicator as icons |
description | string | - | any | Defines the description of the step |
active | boolean | false | true, false | Defines if the step is active |
complete | boolean | false | true, false | Defines if the step is completed |
has-error | boolean | false | true, false | Defines if the step has an error |
with-validation | boolean | false | true, false | Defines if the component should handle moving the steps or just emit an event for user validation. |
Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.