StepperExtendedExample2.razor

@namespace MudExtensions.Docs.Examples
@inject ISnackbar Snackbar
@using MudBlazor.Extensions
@using MudExtensions.Utilities

<MudGrid Class="cursor-default">
    <MudItem xs="12" sm="8" Class="d-flex align-center">
        <MudStepperExtended @ref="_stepper" Class="mud-width-full" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical"
                    PreventStepChangeAsync="new Func<StepChangeDirection, int, Task<bool>>(CheckChange)" Variant="Variant.Filled" Color="Color.Secondary"
                    MobileView="_mobileView" Loading="_loading" HeaderTextView="HeaderTextView.All">
            <ChildContent>
                <MudStepExtended Icon="@Icons.Material.Filled.Approval" Title="Customer Info" StatusChanged="StatusChanged" Order="_infoStepOrder">    
                    <ChildContent>
                        <MudForm @ref="_form">
                            <MudStack>
                                <MudTextField T="string" Label="Name" Variant="Variant.Filled" Required="true" />
                                <MudTextField T="string" Label="Last Name" Variant="Variant.Filled" />
                                <MudTextField T="string" Label="Adress" Variant="Variant.Filled" />
                            </MudStack>
                        </MudForm>
                    </ChildContent>
                </MudStepExtended>
                <MudStepExtended Title="Booking Spec." Icon="@Icons.Material.Filled.MoreVert" Optional="true" Order="_optionsStepOrder">
                    <ChildContent>
                        <MudCheckBox T="bool" Label="Early Check-in" />
                        <MudCheckBox T="bool" Label="Late Check-out" />
                        <MudCheckBox T="bool" Label="Twin Bed" />
                    </ChildContent>
                </MudStepExtended>
                <MudStepExtended Icon="@Icons.Material.Filled.Money" Title="Payment" Order="_paymentStepOrder">
                    <ChildContent>
                        <MudForm @ref="_form2">
                            <MudStack>
                                <MudTextField T="string" Label="Card Number" Variant="Variant.Filled" Required="true" />
                                <MudStack Row="true">
                                    <MudTextField T="string" Label="Expire Date" Required="true" />
                                    <MudTextField T="string" Label="CVC" Required="true" />
                                </MudStack>
                            </MudStack>
                        </MudForm>
                    </ChildContent>
                </MudStepExtended>

                @if (_addResultStep)
                {
                    <MudStepExtended Icon="@Icons.Material.Filled.Alarm" Title="Result Step" IsResultStep="true">
                        <ChildContent>
                            <div class="d-flex flex-column align-center justify-center" style="height: 200px">
                                <MudIconButton Icon="@Icons.Material.Filled.DoneAll" Size="Size.Large" Variant="Variant.Filled" Color="Color.Success" />
                                <MudText>Your reservation successfully completed.</MudText>
                            </div>
                        </ChildContent>
                    </MudStepExtended>
                }
            </ChildContent>
        </MudStepperExtended>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudNumericField @bind-Value="_infoStepOrder" Label="Info Step Order" @bind-Value:after="@(() => _stepper.ForceRender())" Margin="Margin.Dense" Variant="Variant.Outlined" Immediate="true" />
            <MudNumericField @bind-Value="_optionsStepOrder" Label="Options Step Order" @bind-Value:after="@(() => _stepper.ForceRender())" Margin="Margin.Dense" Variant="Variant.Outlined" Immediate="true" />
            <MudNumericField @bind-Value="_paymentStepOrder" Label="Payment Step Order" @bind-Value:after="@(() => _stepper.ForceRender())" Margin="Margin.Dense" Variant="Variant.Outlined" Immediate="true" />
            <MudCheckBox @bind-Value="_vertical" Color="Color.Secondary" Label="Vertical" Dense="true" />
            <MudCheckBox @bind-Value="_linear" Color="Color.Secondary" Label="Linear" Dense="true" />
            <MudSwitchM3 @bind-Value="_mobileView" Color="Color.Secondary" Label="Mobile View" />
            <MudSwitchM3 @bind-Value="_addResultStep" Color="Color.Secondary" Label="Has Result Step" />
            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(() => _stepper?.Reset())">Reset</MudButton>
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudStepperExtended? _stepper = new();
    MudForm _form = new();
    MudForm _form2 = new();
    bool _checkValidationBeforeComplete = false;
    bool _linear;
    bool _mobileView;
    bool _addResultStep = true;
    bool _loading;
    bool _vertical = false;
    int _infoStepOrder;
    int _optionsStepOrder;
    int _paymentStepOrder;

    private async Task<bool> CheckChange(StepChangeDirection direction, int targetIndex)
    {
        if (_checkValidationBeforeComplete == true)
        {
            // Always allow stepping backwards, even if forms are invalid
            if (direction == StepChangeDirection.Backward)
            {
                return false;
            }
            if (_stepper?.GetActiveIndex() == 0)
            {
                _loading = true;
                StateHasChanged();
                await Task.Delay(1000);
                await _form.Validate();
                _loading = false;
                StateHasChanged();
                return !_form.IsValid;
            }
            else if (_stepper?.GetActiveIndex() == 2)
            {
                _loading = true;
                StateHasChanged();
                await Task.Delay(1000);
                await _form2.Validate();
                _loading = false;
                StateHasChanged();
                return !_form2.IsValid;
            }
            else
            {
                return false;
            }
        }
        else
        {
            return false;
        }
    }

    private void StatusChanged(StepStatus status)
    {
        Snackbar.Add($"First step {status.ToDescriptionString()}.", Severity.Info);
    }

}