I recently published a NUGET package called CG.Blazor.Wizard, with a Blazor based wizard component inside. I though I would write about that component, today.
The source for the project is available, for free, HERE.
The NUGET package is available, for free, HERE.
A working quick start sample is available HERE.
The component itself looks a bit like this:
Using the component is pretty easy, really. Add code to a razor component, in your Blazor project, like this:
<MuddyWizard>
<MuddyWizardPanel Title="First Step" Description="Step 1">
<p>This is the body of the first step. </p>
</MuddyWizardPanel>
<MuddyWizardPanel Title="Second Step" Description="Step 2">
<p>This is the body of the second step.</p>
</MuddyWizardPanel>
<MuddyWizardPanel Title="Third Step" Description="Step 3">
<p>The is the body of the third step.</p>
</MuddyWizardPanel>
<MuddyWizardPanel Title="Fourth Step" Description="Step 4">
<p>The is the body of the fourth step.</p>
</MuddyWizardPanel>
</MuddyWizard>
You can, of course, add as many, or as few panels as you like. The panels may contain any valid Blazor content. There are loads of other parameters, events, and whatnot, but I tried to keep this code snippet simple.
A working quick start sample is available HERE that demonstrates the capabilities of the control better than I can do here.
Sharp eyed developers will no doubt have picked up on the fact that I leveraged the MudBlazor control library to create this wizard control. That’s because I use MudBlazor quite a bit and the library doesn’t already contain a wizard control. So, I wrote one for myself.
Because the control depends on MudBlazor, using it also requires you to integrate your Blazor project with the MudBlazor library. Instructions for how to do that can be found HERE.
Next time I’ll dig into the internals of the wizard and explain how I went about creating the control.
Photo by Matt Palmer on Unsplash
