[FluentWizard] New component

[dvoituron]

FluentWizard - New component

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

<FluentWizard DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)">
    <Steps>
        <FluentWizardStep Label="Intro">
            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.
        </FluentWizardStep>
        <FluentWizardStep Label="Get started" Summary="Begin the tasks">
            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.
        </FluentWizardStep>
        <FluentWizardStep Disabled="true" Label="Disabled step" Summary="This step is disabled">
            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.
        </FluentWizardStep>
        <FluentWizardStep Label="Set budget"
                          Summary="Identify the best price"
                          IconPrevious="@(new Icons.Filled.Size24.Star())"
                          IconCurrent="@(new Icons.Filled.Size24.StarEmphasis())"
                          IconNext="@(new Icons.Regular.Size24.Star())"
                          DisplayStepNumber="false">
            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.
        <FluentWizardStep Label="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.
        </FluentWizardStep>
    </Steps>
</FluentWizard>

Unit Tests

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1211.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1211.westeurope.3.azurestaticapps.net