BzDrawer

Drawer

A sliding panel from any of the four edges, with an optional footer.

Side drawer with a footer

Controlled with bind-Open. The Footer section is separate so buttons stay pinned to the bottom.

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;
}

All four sides

All four share one snippet; only Side changes. Size sets the drawer width (or height).

Parameter	Default	Description
`Side`	`End`	`Start` / `End` / `Top` / `Bottom`
`Size`	`320px`	Width for side drawers, height for top/bottom
`Title`	—	Header title
`ShowClose`	`true`	Close button in the header
`Footer`	—	A section pinned to the bottom

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;
    }
}