BzWizard

Wizard

Horizontal (Numbered) + step validation + message + default buttons
razor
@using BzCore.Components.Wizard
@using BzCore.Enums

<BzWizard @ref="wiz" Variant="BzWizardVariant.Numbered" ShowCancel="true" OnFinish="OnFinish">
    <BzStep Title="اطلاعات" Icon="fa-solid fa-user" OnValidate="ValidateStep1">
        <BzInput TValue="string" @bind-Value="name" Label="نام" />
    </BzStep>
    <BzStep Title="آدرس" Icon="fa-solid fa-location-dot">…</BzStep>
    <BzStep Title="پرداخت" Optional="true">…</BzStep>
</BzWizard>

@code {
    Task<bool> ValidateStep1() {
        if (string.IsNullOrWhiteSpace(name)) {
            wiz.SetMessage("نام را وارد کنید.", BzSeverity.Error);
            return Task.FromResult(false);
        }
        return Task.FromResult(true);
    }
}
@* ظاهرها: Numbered/Dots/Progress/Arrows/Panels — افقی/عمودی *@
Custom buttons (FooterContent) + header

If the default buttons are not enough, write FooterContent yourself and drive the steps through a ref.

Project setup
razor
@using BzCore.Components.Wizard
@using BzCore.Components.Button
@using BzCore.Enums

<BzWizard @ref="wiz" Variant="BzWizardVariant.Progress">
    <HeaderContent>
        <div style="display:flex;align-items:center;gap:.5rem">
            <i class="fa-solid fa-rocket"></i>
            <span>راه اندازی پروژه</span>
        </div>
    </HeaderContent>

    @* When you supply FooterContent, the steps go in ChildContent. *@
    <ChildContent>
        <BzStep Title="نوع پروژه">انتخاب نوع پروژه</BzStep>
        <BzStep Title="تنظیمات">تنظیمات اولیه</BzStep>
        <BzStep Title="پایان">آماده است!</BzStep>
    </ChildContent>

    <FooterContent>
        <BzButton Text="قبلی" Variant="BzButtonVariant.Outlined" OnClick="@(() => wiz.Previous())" />
        <BzButton Text="بعدی" Color="BzColor.Primary" OnClick="@(() => wiz.Next())" />
        <BzButton IconOnly StartIcon="fa-solid fa-circle-info" Variant="BzButtonVariant.Text"
                  OnClick="@(() => wiz.SetMessage("راهنما: مرحله ها را کامل کنید.", BzSeverity.Info))" />
    </FooterContent>
</BzWizard>

@code {
    private BzWizard wiz = default!;
}

@*
Methods available through the ref:
    wiz.Next()  wiz.Previous()  wiz.GoTo(index)
    wiz.SetMessage(text, severity)
*@
Other variants

Every variant shares one snippet; only Variant changes.

Dots

Arrows

Panels (vertical)

razor
@using BzCore.Components.Wizard
@using BzCore.Enums

@* Only Variant changes: Numbered | Dots | Progress | Arrows | Panels *@
<BzWizard Variant="BzWizardVariant.Dots">
    <BzStep Title="یک">1</BzStep>
    <BzStep Title="دو">2</BzStep>
    <BzStep Title="سه">3</BzStep>
</BzWizard>

<BzWizard Variant="BzWizardVariant.Arrows">
    <BzStep Title="سبد">سبد خرید</BzStep>
    <BzStep Title="ارسال">اطلاعات ارسال</BzStep>
    <BzStep Title="پرداخت">پرداخت</BzStep>
</BzWizard>

@* Panels also supports a vertical layout *@
<BzWizard Variant="BzWizardVariant.Panels" Orientation="BzOrientation.Vertical">
    <BzStep Title="حساب" Subtitle="ساخت حساب">مرحله 1</BzStep>
    <BzStep Title="پروفایل" Subtitle="تکمیل پروفایل">مرحله 2</BzStep>
    <BzStep Title="پایان" Subtitle="تایید">مرحله 3</BzStep>
</BzWizard>