Wizard

Wizards are a step-by-step user interface used to break down complex tasks into digestible pieces. The simplified layout allows the reader to more easily understand the scope of a given task and the actions needed to complete the task.

By default, steps are displayed on the left, but you can move them to the top of the component. They are in the form of circular bubbles, with a check mark indicating whether it has been processed or not. They are not numbered, but the DisplayStepNumber property can be used to add this numbering. It's also possible to customize these bubbles via the IconPrevious, IconCurrent and IconNext properties.

The order of the steps must be defined when designing the Wizard. However, it is possible to enable or disable a step via the Disabled property.

By default, the contents of all steps are hidden and displayed when the user arrives at that that step (for display performance reasons). But the DeferredLoading property property reverses this process and generates the contents of the active step only.

The Label and Summary properties display the name and a small summary of the step below or next to the bubble. The StepTitleHiddenWhen property is used to hide this title and summary when the screen width is reduced, for example on mobile devices. By default, the value XsAndDown is applied to hide this data on cell phones (< 600px).

All these areas (bubbles on the left/top and navigation buttons at the bottom) are fully customizable using the StepTemplate and ButtonTemplate properties (see the second example). You can customize button labels using the ButtonTemplate or by modifying the static properties FluentWizard.LabelButtonPrevious / LabelButtonNext / LabelButtonDone.

note: this FluentWizard is not yet fully compatible with accessibility.

Examples

Default

Example
Step position TopLeft WizardStepSequence: LinearAnyVisited
  1. 1

    Intro

  2. 2

    Get started

    Begin the tasks

  3. 3

    Disabled step

    This step is disabled

  4. Set budget

    Identify the best price

  5. 5

    Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor, ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod. Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
Nunc dignissim tortor eget lacus porta tristique. Nunc in posuere dui. Cras ligula ex, ullamcorper in gravida in, euismod vitae purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at velit leo. Suspendisse potenti. Cras dictum eu augue in laoreet.
Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur turpis, eget molestie ipsum. 1011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac, aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie. Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
Next
Download: 

Customized

Example
  1. Intro
  2. Get Started
  3. Set budget
  4. Summary
Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor, ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
Get Started
Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod. Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
Set budget
Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur turpis, eget molestie ipsum.
Summary
Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac, aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie. Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
Next Go to last page
Download: 

Edit Form

note: In order for the Wizard component to automatically validate your EditForms, you must use the 'FluentEditForm' component instead of the 'EditForm' component: 

<FluentWizardStep>
    <FluentEditForm>
        <DataAnnotationsValidator />
    </FluentEditForm>
</FluentWizardStep>
Example
  1. 1

    Personal Info

  2. 2

    Address Info

  3. Set budget

    Identify the best price

  4. 4

    Finish

Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur turpis, eget molestie ipsum. 1011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
Next
Download: 

Documentation

FluentWizard Class

Parameters

Name
Type
Default
Description
BorderWizardBorder
None
Display a border of the Wizard.
ButtonTemplateRenderFragment<int>?
Gets or sets the buttons section of the wizard.
This configuration overrides the whole rendering of the bottom-right section of the Wizard,
including the built-in buttons and thus provides a full control over it.
Custom Wizard buttons do not trigger the component OnChange and OnFinish events.
The OnChange event can be triggered using the FluentWizard.GoToStepAsync(System.Int32,System.Boolean) method from your code.
DisplayStepNumberWizardStepStatus
None
Display a number on each step icon. Can be overridden by the step FluentWizardStep.DisplayStepNumber property.
Heightstring
400px
Gets or sets the height of the wizard.
StepperBulletSpacestring?
Gets or sets the space between two bullets (ex. 120px).
StepperPositionStepperPosition
Left
Gets or sets the stepper position in the wizard (Top or Left).
StepperSizestring?
Gets or sets the stepper width (if position is Left)
or the stepper height (if position is Top).
StepsRenderFragment?
Gets or sets the wizard steps. Add WizardStep tags inside this tag.
StepSequenceWizardStepSequence
Linear
Gets or sets the way to navigate in the Wizard Steps.
Default is WizardStepSequence.Linear.
StepTitleHiddenWhenGridItemHidden?
XsAndDown
Hide step titles and summaries on specified sizes (you can combine several values: GridItemHidden.Sm | GridItemHidden.Xl).
The default value is GridItemHidden.XsAndDown to adapt to mobile devices.
Valueint
0
Gets or sets the step index of the current step.
This value is bindable.
Widthstring
100%
Gets or sets the width of the wizard.

EventCallbacks

Name
Type
Description
OnFinishEventCallback
Triggers when the done button is clicked.
ValueChangedEventCallback<int>
Triggers when the value has changed.

Methods

Name
Parameters
Type
Description
FinishAsyncbool validateEditContexts
Task
Optionally validate and invoke the FluentWizard.OnFinish handler.
GoToStepAsyncint step
bool validateEditContexts
Task
Navigate to the specified step, with or without validate the current EditContexts.

FluentWizardStep Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
Gets or sets the content of the step.
DeferredLoadingbool
False
Render the Wizard Step content only when the Step is selected.
Disabledbool
False
Gets or sets whether the step is disabled.
DisplayStepNumberbool?
Display a number the step icon.
By default, this is the FluentWizard.DisplayStepNumber value.
FluentWizardFluentWizard
Reference to the parent FluentWizardStep.FluentWizard component.
For internal use only
IconCurrentIcon
Preview: 
Gets or sets the icon to display for the current/active step.
By default, it is a checkmark circle.
IconNextIcon
Preview: 
Gets or sets the icon to display for the future/next step.
By default, it is a checkmark circle.
IconPreviousIcon
Preview: 
Gets or sets the icon to display for the past/previous step.
By default, it is a checkmark circle.
Indexint
0
Gets the step index.
Labelstring
Gets or sets the label of the step.
StepTemplateRenderFragment<FluentWizardStepArgs>?
Gets or sets the template of the step icon.
Summarystring
Gets or sets the summary of the step, to diplay near the label.

EventCallbacks

Name
Type
Description
OnChangeEventCallback<FluentWizardStepChangeEventArgs>
The OnChange event fires before the current step has changed.
The EventArgs contains a field of the targeted new step and a field to cancel the build-in action.

Methods

Name
Parameters
Type
Description
ClearEditFormAndContextvoid
RegisterEditFormAndContextEditForm editForm
EditContext editContext
void
ValidateEditContextsbool
None
Inside
Outside
All
None
Previous
Current
Next
All
Top
Left
Linear
Any
Visited
None
Xs
XsAndDown
Sm
SmAndDown
Md
MdAndDown
Lg
LgAndDown
Xl
XlAndDown
Xxl
XxlAndUp
XlAndUp
LgAndUp
MdAndUp
SmAndUp
XxlAndDown
XsAndUp
Filled.Size24.Circle
Regular.Size24.Circle
Filled.Size24.CheckmarkCircle
An error has occurred. This application may no longer respond until reloaded. Reload 🗙