Install-Package Append.Blazor.Sidepanel
There is a sample application in /docs folder which is also hosted as documentation.
builder.Services.AddSidepanel();@using Append.Blazor.Sidepanel<Sidepanel/>@inject ISidepanelService SidepanelSidepanel.Open<Counter>("Counter", "example");
Sidepanel.Close();<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();
}
}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));
}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);
}In App.css
#sidepanel.is-open {
width: 80%;
}
@@media (min-width: 768px) {
#sidepanel.is-open {
width: 50%;
}
}Please feel free to use the component, open issues, fix bugs or provide feedback.
This project is created and maintained by:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent