Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlfranklin/BlazorSliders
Create multiple panels with horizontal and vertical splitters
https://github.com/carlfranklin/BlazorSliders
Last synced: 3 months ago
JSON representation
Create multiple panels with horizontal and vertical splitters
- Host: GitHub
- URL: https://github.com/carlfranklin/BlazorSliders
- Owner: carlfranklin
- License: mit
- Created: 2021-02-26T18:47:06.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T16:18:53.000Z (5 months ago)
- Last Synced: 2024-07-17T18:49:52.689Z (4 months ago)
- Language: HTML
- Size: 477 KB
- Stars: 34
- Watchers: 2
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-blazor - BlazorSliders -  Create multiple panels separated by sliding splitters. (Libraries & Extensions / 2D/3D Rendering engines)
README
# 
BlazorSliders
**Nuget**: https://www.nuget.org/packages/BlazorSliders/
```
Install-Package BlazorSliders
```
Create multiple panels separated by sliding splitters.
Github: https://github.com/carlfranklin/BlazorSliders
## Contents
* [Live Demo:](#live-demo)
* [YouTube Demo (BlazorTrain):](#youtube-demo-blazortrain)
* [Description](#description)
* [Usage](#usage)
* [Simple Vertical Split:](#simple-vertical-split)
* [Simple Horizontal Split:](#simple-horizontal-split)
* [Four Panels:](#four-panels)
* [Initial size and position based on percent size of browser:](#initial-size-and-position-based-on-percent-size-of-browser)
* [Complex Nesting:](#complex-nesting)
* [NavMenu used in demos:](#navmenu-used-in-demos)
* [Icon](#icon)
## Live Demo:
https://blazorslidertest.azurewebsites.net/
## YouTube Demo (BlazorTrain):
https://youtu.be/fNDd7moZJ4c
## Description
There are four main components:
#### AbsolutePanel
AbsolutePanel is the container for a page. It provides events for when the window is resized.
#### Window
Window is used by the AbsolutePanel but can also be used on its own. It provides an event for when the window (browser) is resized, passing the Width and Height.
#### VerticalSliderPanel
Provides two content components and a vertical splitter between the two. Handles all UI requirements.
#### HorizontalSliderPanel
Provides two content components and a horizontal splitter between the two. Handles all UI requirements.
## Usage
Add to *_Imports.razor*:
```c#
@using BlazorSliders
```
Change your *\Shared\MainLayout.razor* to the following:
```
@inherits LayoutComponentBase
@Body
```
**For Blazor Server:**
`ServerPrerendered` is not supported.
In your *_Hosts.cshtml* file, set the following:
```xml
```
For .NET 6 projects, in your *_Hosts.cshtml* file, set the following:
```xml
```
In .NET 5: Add the following line to `ConfigureServices` in *Startup.cs* :
```cs
services.AddScoped();
```
snippet source | anchor
In .NET 6: Add the following to *Program.cs*:
```cs
services.AddScoped();
```
snippet source | anchor
**For Blazor WebAssembly:**
Add the following to `Main()` in *Program.cs*:
```cs
builder.Services.AddScoped();
```
snippet source | anchor
### Simple Vertical Split:
Left Content
This is a demo of a single vertical slider panel.
Right Content
```
snippet source | anchor
### Simple Horizontal Split:
Top Content
This is a demo of a single horizontal slider panel.
Bottom Content
```
snippet source | anchor
### Four Panels:
Top Content 1
This is a demo of four panels with styling
Bottom Content 1
Top Content 2
Bottom Content 2
```
snippet source | anchor
### Initial size and position based on percent size of browser:
```razor
@page "/windowresize"
@(WindowSize != null)
{
Top Content 1
This demo sets the location of the sliders based on a percentage of the
initial size of the browser.
Bottom Content 1
Top Content 2
Bottom Content 2
}
@code
{
Size WindowSize { get; set; } = null;
int VerticalLeftPanelWidthPercent = 80;
int LeftHorizontal1TopPanelHeightPercent = 40;
int RightHorizontal1TopPanelHeightPercent = 60;
int VerticalLeftPanelWidth
{
get
{
if (WindowSize != null)
{
return WindowSize.Width * VerticalLeftPanelWidthPercent / 100;
}
else
return 0;
}
}
int LeftHorizontalTopPanelHeight
{
get
{
if (WindowSize != null)
{
var height = WindowSize.Height * LeftHorizontal1TopPanelHeightPercent / 100;
return height;
}
else
return 0;
}
}
int RightHorizontalTopPanelHeight
{
get
{
if (WindowSize != null)
{
var height = WindowSize.Height * RightHorizontal1TopPanelHeightPercent / 100;
return height;
}
else
return 0;
}
}
void OnWindowResized(Size Size)
{
WindowSize = Size;
}
}
```
snippet source | anchor
### Complex Nesting:
> Note: Vertical nesting in vertical panels and horizontal nesting in horizontal panels has now been implemented as shown below.
#### Vertical Panel Nested in Vertical Panel:
```razor
@page "/doublevertical"
Left Content in the Left Parent Panel
This is a demo of a nested vertical slider panel.
Right Content in the Left Parent Panel
Left Content in the Right Parent Panel
Right Content in the Right Parent Panel
```
snippet source | anchor
#### Horizontal Panel Nested in Horizontal Panel:
```razor
@page "/doublehorizontal"
Top Content in the Top Parent Panel
This is a demo of a nested horizontal slider panel.
Bottom Content in the Top Parent Panel
Top Content in the Bottom Parent Panel
Bottom Content in the Bottom Parent Panel
```
snippet source | anchor
#### Crazy Nesting Inception:
Top Content 1
This is the craziest demo of all
Bottom Content 1
Top Content 2
Bottom Content 2
Top Content 3
Bottom Content 3
Bottom Content 4
```
snippet source | anchor
### NavMenu used in demos:
Vertical
Horizontal
4 Panels
Percent Width
Crazy
Double Vertical
Double Horizontal
```
snippet source | anchor
## Icon
[slide](https://thenounproject.com/term/slide/3631831/) designed by [Eucalyp](https://thenounproject.com/eucalyp) from [The Noun Project](https://thenounproject.com/). Licensed under [Creative Commons](https://creativecommons.org/licenses/by/3.0/us/legalcode).