I like using step wizards in my applications, sign-up forms, shopping cart checkout, and complex data entry, but I had not been able to find a wizard step indicator that I liked so I built this one.
As it turned out, it was not as hard as I thought it would have been. There are a couple of key parts you have to keep in mind when using a step wizard, such as:
1. What step am I on?
2. Should the "Prev" / "Next" buttons be enabled or disabled on this step?
3. What kind of visual clues do I show the user?
I will walk you through how we answer these questions in this sample project.
HTML
The main container has a div that holds the progress divs, one div for each "step" of your process. Below that we have our "Prev" and "Next" buttons
We will need to wire in the on-click events for the two buttons. The buttons will need to be able to be disabled and enabled via CSS class settings.
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" >Prev</button>
<button class="btn" id="next" >Next</button>
</div>
CSS
In the CSS we have styles for the backgrounds, connecting lines, and buttons. All have normal styling.
We decided to go with circles as the "step indicator" landing point, but you can style it any way you would like, icons, squares, etc. We also have a circle "active" style to use to show what steps we have completed and the current the user is on. You could use a slightly different style for the active step if you would like that.
For the buttons, the "On" state, we use a transform. For the "Disable" state we set the background color and turn the curser off.
I think the UI of the component turned out a nice mix of professional and cute.
Blazor Stuff
Now for the meat of what we are doing. To show "what step" we are on, we have an ActiveIndex variable that we set to the current set. Then we apply a style to the step div if the active is LESS THAN or EQUAL the active index. Since we are checking for less than or equal to the active index, we show the past steps and the current step. While the future steps are shown as not active.
<div class="progress-container">
<div class="progress" id="progress" style="@barLength"></div>
<div class="circle @(ActiveIndex >= 1 ? "active" : "")">1</div>
<div class="circle @(ActiveIndex >= 2 ? "active" : "")">2</div>
<div class="circle @(ActiveIndex >= 3 ? "active" : "")">3</div>
<div class="circle @(ActiveIndex >= 4 ? "active" : "")">4</div>
</div>
We also need to draw the line between the circles. To do this we need to do some calculations based on the active index and the maximum number of steps. Once we have this calculation, we set the style length of the "progress" div
double calc = ((double)(ActiveIndex - 1) / (double)(MaxIndex - 1)) * 100;
barLength = $"width:{calc}%";
With this method, we need to handle adjusting the "Prev" and "Next" buttons as well.
if (ActiveIndex == 1)
{
prevDisabled = true;
}
else if(ActiveIndex == 4)
{
nextDisabled = true;
}
else
{
prevDisabled = false;
nextDisabled = false;
}
HTML
<div class="progress" id="progress" style="@barLength"></div>
Now we put it all together within the click event handler:
private void Previous()
{
ActiveIndex--;
if(ActiveIndex < 1)
{
ActiveIndex = 1;
}
UpdateBar();
}
private void Next()
{
ActiveIndex++;
if(ActiveIndex > MaxIndex)
{
ActiveIndex = MaxIndex;
}
UpdateBar();
}
Summary
I think this is a very useful component and I am planning on putting it in my UI library. As a next step, I would add the functionality to allow the user to "jump" different steps by adding click handlers to the circles. This would complete the logic in the wizard thought if you on step de[ended on a previous step.
Comments
Post a Comment