BlazorUI Demo

Drawer

A bindable modal or non-modal panel from any viewport edge.

Left drawer
Customer filters

Scrollable drawer content belongs here.

View code
<BuiButton OnClick="OpenDrawer">Open drawer</BuiButton>
<BuiDrawer @ref="drawer" @bind-Open="open" Title="Customer filters" Position="DrawerPosition.Left"><ChildContent><BuiText>Scrollable drawer content belongs here.</BuiText></ChildContent><Footer><BuiButton OnClick="CloseDrawer">Apply</BuiButton></Footer></BuiDrawer>

@code {
    private BuiDrawer? drawer;
    private bool open;
    private Task OpenDrawer() => drawer?.OpenAsync() ?? Task.CompletedTask;
    private Task CloseDrawer() => drawer?.CloseAsync() ?? Task.CompletedTask;
}