BzDrawer
کشو
پنل کشویی از هر چهار طرف صفحه، با فوتر اختیاری.
دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنتقویمابزار ایرانی
کامپوننتی پیدا نشد.
کشوی کناری با فوتر
با bind-Open کنترل میشه. بخش Footer جداس تا دکمه ها همیشه پایین بچسبن.
@using BzCore.Components.Overlay
@using BzCore.Components.Button
@using BzCore.Enums
<BzButton Text="باز کردن از انتها" Color="BzColor.Primary"
StartIcon="fa-solid fa-filter"
OnClick="@(() => _drawer = true)" />
<BzDrawer @bind-Open="_drawer" Title="فیلترها" Side="BzDrawerSide.End">
<ChildContent>
<p>محتوای کشوی کناری اینجاس — میتونه یک فرم کامل باشه.</p>
</ChildContent>
<Footer>
<BzButton Text="اعمال" Color="BzColor.Primary" FullWidth
OnClick="@(() => _drawer = false)" />
</Footer>
</BzDrawer>
@code {
private bool _drawer;
}چهار جهت
کد هر چهار حالت یکی است و فقط Side فرق میکنه. Size هم عرض (یا ارتفاع) کشو را تعیین میکنه.
| پارامتر | پیش فرض | توضیح |
|---|---|---|
Side | End | Start / End / Top / Bottom |
Size | 320px | عرض کشوی کناری یا ارتفاع کشوی بالا/پایین |
Title | — | عنوان هدر |
ShowClose | true | دکمه ی بستن در هدر |
Footer | — | ناحیه چسبیده به پایین |
@using BzCore.Components.Overlay
@using BzCore.Components.Button
@using BzCore.Enums
<BzButton Text="Start" Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDrawerSide.Start))" />
<BzButton Text="End" Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDrawerSide.End))" />
<BzButton Text="Top" Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDrawerSide.Top))" />
<BzButton Text="Bottom" Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDrawerSide.Bottom))" />
<BzDrawer @bind-Open="_open" Title="@_side.ToString()" Side="_side" Size="280px">
<ChildContent>
<p>Side = @_side</p>
</ChildContent>
</BzDrawer>
@code {
private bool _open;
private BzDrawerSide _side = BzDrawerSide.End;
private void Open(BzDrawerSide side)
{
_side = side;
_open = true;
}
}