https://github.com/Append-IT/Blazor.Sidepanel
Sidepanel for Microsoft Blazor
https://github.com/Append-IT/Blazor.Sidepanel
aspnet blazor sidepanel
Last synced: about 1 year ago
JSON representation
Sidepanel for Microsoft Blazor
- Host: GitHub
- URL: https://github.com/Append-IT/Blazor.Sidepanel
- Owner: Append-IT
- License: mit
- Created: 2021-10-30T11:36:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-25T10:33:08.000Z (over 2 years ago)
- Last Synced: 2024-11-18T23:53:29.754Z (over 1 year ago)
- Topics: aspnet, blazor, sidepanel
- Language: C#
- Homepage:
- Size: 2.7 MB
- Stars: 44
- Watchers: 1
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Blazor.Sidepanel -   A powerful and customizable Sidepanel implementation for Blazor applications. (Libraries & Extensions / 2D/3D Rendering engines)
README
# Sidepanel
[](https://www.nuget.org/packages/Append.Blazor.Sidepanel)
[](https://www.nuget.org/packages/Append.Blazor.Sidepanel)
[](https://github.com/Append-IT/Blazor.Sidepanel/blob/main/LICENSE)
## Preview
## Installation
```
Install-Package Append.Blazor.Sidepanel
```
## Demo
There is a sample application in /docs folder which is also hosted as [documentation](https://blazor-sidepanel.append.be).
## Usage
### Add `ISidepanelService` via DI in `Program.cs`
```csharp
builder.Services.AddSidepanel();
```
### Add to `_Imports.razor`
```cs
@using Append.Blazor.Sidepanel
```
### Add to `MainLayout.razor`
```cs
```
### Inject into component/pages
```cs
@inject ISidepanelService Sidepanel
```
### Opening and Closing
#### Basic
```csharp
Sidepanel.Open("Counter", "example");
Sidepanel.Close();
```
### With component
```razor
Some inner content
@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
```cs
private int increaseBy = 10;
private void OpenCounterWithParameter()
{
Sidepanel.Open("Counter", "example", (nameof(increaseBy),increaseBy));
}
```
#### Advanced with multiple parameters
> The parameters have to be set in the Counter component
```cs
private void OpenCounterWithParameters()
{
var parameters = new Dictionary {
{ (nameof(increaseBy)), increaseBy },
{ (nameof(initialValue)), initialValue}
};
Sidepanel.Open("Counter","Example",parameters);
}
```
#### Override styling
In App.css
```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](https://github.com/vertonghenb)