BzDrawer

کشو

پنل کشویی از هر چهار طرف صفحه، با فوتر اختیاری.

کشوی کناری با فوتر

با bind-Open کنترل میشه. بخش Footer جداس تا دکمه ها همیشه پایین بچسبن.

razor
@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 هم عرض (یا ارتفاع) کشو را تعیین میکنه.

پارامتر پیش فرض توضیح
SideEndStart / End / Top / Bottom
Size320pxعرض کشوی کناری یا ارتفاع کشوی بالا/پایین
Titleعنوان هدر
ShowClosetrueدکمه ی بستن در هدر
Footerناحیه چسبیده به پایین
razor
@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;
    }
}