Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Drawer

Sometimes, the Dialog component does not meet our needs. For example, your form is very long, or you need to temporarily display some documents. Drawer has almost the same API as Dialog, which brings a different experience to the UI.

Basic usage

Call out a temporary sidebar that can be called out from multiple directions

Demo

left to right

right to left

top to bottom

bottom to top

The layout, components, etc. in the drawer are fully customizable

@inject IStringLocalizer<DrawerNormal> Localizer

<div>
    <p class="d-flex flex-wrap drawer-demo">
        <RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
    </p>
    <p>
        <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">@Localizer["Open"]</button>
    </p>
    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
            <p>@Localizer["Description"]</p>
            <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">@Localizer["Close"]</button>
        </div>
    </Drawer>
</div>

@code {
    private bool IsOpen { get; set; }

    private Placement DrawerAlign { get; set; }

    private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[]
    {
        new SelectedItem("left", "left to right")
        {
            Active = true
        },
        new SelectedItem("right", "right to left"),
        new SelectedItem("top", "top to bottom"),
        new SelectedItem("bottom", "bottom to top")
    };

    private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
    {
        DrawerAlign = val.Value switch
        {
            "right" => Placement.Right,
            "top" => Placement.Top,
            "bottom" => Placement.Bottom,
            _ => Placement.Left
        };
        IsOpen = false;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Click to close the mask

By setting the IsBackdrop property to true, the drawer is automatically closed when the mask part is clicked

Demo

Click on the shaded part of the mask to automatically close the drawer

@inject IStringLocalizer<DrawerPlacement> Localizer

<div>
    <p>
        <button type="button" class="btn btn-primary" @onclick="@OpenDrawer">@Localizer["Open"]</button>
    </p>
    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
        <p class="mt-3 text-center">
            @Localizer["PlacementContent"]
        </p>
    </Drawer>
</div>

@code {
    private bool IsBackdropOpen { get; set; }

    private void OpenDrawer()
    {
        IsBackdropOpen = true;
    }
}

No backdrop

By setting the ShowBackdrop="false" do not show the backdrop

Demo

The layout, components, etc. in the drawer are fully customizable

@inject IStringLocalizer<DrawerNoBackdrop> Localizer

<div>
    <p>
        <button type="button" class="btn btn-primary" @onclick="@OpenNoBackdropDrawer">@Localizer["Open"]</button>
    </p>
    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsShowBackdropOpen" ShowBackdrop="false">
        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
            <p>@Localizer["Description"]</p>
            <button type="button" class="btn btn-primary" @onclick="@(e => IsShowBackdropOpen = false)">@Localizer["Close"]</button>
        </div>
    </Drawer>
</div>

@code {
    private bool IsShowBackdropOpen { get; set; }

    private void OpenNoBackdropDrawer()
    {
        IsShowBackdropOpen = true;
    }
}

Attributes

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Drawer

Sometimes, the Dialog component does not meet our needs. For example, your form is very long, or you need to temporarily display some documents. Drawer has almost the same API as Dialog, which brings a different experience to the UI.

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01