BzWizard
Wizard
ButtonsFormsInput groupButton groupsDatePickerAutoCompleteCardsDisplayLoadingDialogsNotificationsOperation messageDrawerContext menuPaginationLightboxTreeDataGridChartsTabs & AccordionNavigationSidebarTimelineWizardCarouselUploaderEditorCalendarIranian tools
No component found.
Horizontal (Numbered) + step validation + message + default buttons
@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
@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)
@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>