Awesome

Sidepanel

Preview

Installation

Install-Package Append.Blazor.Sidepanel

Demo

There is a sample application in /docs folder which is also hosted as documentation.

Usage

Add ISidepanelService via DI in Program.cs

builder.Services.AddSidepanel();

Add to _Imports.razor

@using Append.Blazor.Sidepanel

Add to MainLayout.razor

<Sidepanel/>

Inject into component/pages

@inject ISidepanelService Sidepanel

Opening and Closing

Basic

Sidepanel.Open<Counter>("Counter", "example");
Sidepanel.Close();

With component

<SidepanelComponent Title="Your Title" SubTitle="Optional Subtitle" @ref="sidepanel">
    <div>Some inner content</div>
</SidepanelComponent>

@code
{
    private SidepanelComponent sidepanel;
    private void Open()
    {
        sidepanel.Open();
    }

    private void Close()
    {
        sidepanel.Close();
    }
}

Advanced with 1 parameter

The parameter has to be set in the Counter component

private int increaseBy = 10;
private void OpenCounterWithParameter()
{
    Sidepanel.Open<Counter>("Counter", "example", (nameof(increaseBy),increaseBy));
}

Advanced with multiple parameters

The parameters have to be set in the Counter component

private void OpenCounterWithParameters()
{
    var parameters = new Dictionary<string, object> { 
        { (nameof(increaseBy)), increaseBy },
        { (nameof(initialValue)), initialValue}
    };
    Sidepanel.Open<Counter>("Counter","Example",parameters);
}

Override styling

In App.css

#sidepanel.is-open {
    width: 80%;
}

@@media (min-width: 768px) {
    #sidepanel.is-open {
        width: 50%;
    }
}

Contributions and feedback

Please feel free to use the component, open issues, fix bugs or provide feedback.

Contributors

This project is created and maintained by:

• Benjamin Vertonghen