https://github.com/Append-IT/Blazor.Sidepanel

Sidepanel for Microsoft Blazor
https://github.com/Append-IT/Blazor.Sidepanel

aspnet blazor sidepanel

Last synced: 3 months 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 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-25T10:33:08.000Z (about 1 year ago)
• Last Synced: 2024-08-04T01:08:12.337Z (7 months ago)
• Topics: aspnet, blazor, sidepanel
• Language: C#
• Homepage:
• Size: 2.7 MB
• Stars: 42
• Watchers: 1
• Forks: 11
• 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

[![Package Version](https://img.shields.io/nuget/v/Append.Blazor.Sidepanel.svg)](https://www.nuget.org/packages/Append.Blazor.Sidepanel)

[![NuGet Downloads](https://img.shields.io/nuget/dt/Append.Blazor.Sidepanel.svg)](https://www.nuget.org/packages/Append.Blazor.Sidepanel)

[![License](https://img.shields.io/github/license/Append-IT/Blazor.Sidepanel.svg)](https://github.com/Append-IT/Blazor.Sidepanel/blob/main/LICENSE)

## Preview

![](docs/wwwroot/intro.gif)

## 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)