BzWizard
ویزارد
دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنتقویمابزار ایرانی
کامپوننتی پیدا نشد.
افقی (Numbered) + ولیدیشن مرحله + پیام + دکمههای پیش فرض
@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 — افقی/عمودی *@دکمه های سفارشی (FooterContent) + هدر
اگر دکمه های پیش فرض کافی نبود، FooterContent را خودتان بنویسید و با ref مرحله ها را جابه جا کنید.
راهاندازی پروژه
@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)
*@سایر ظاهرها
همه ی ظاهرها یک کد دارند و فقط Variant فرق میکنه.
Dots
Arrows
Panels (عمودی)
@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>