Skip to content

CodingConnected/BlazorSliders

BranchesTags
 
 

Repository files navigation

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:

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:

@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:

<component type="typeof(App)" render-mode="Server" />

For .NET 6 projects, in your _Hosts.cshtml file, set the following:

<component type="typeof(HeadOutlet)" render-mode="Server" />

In .NET 5: Add the following line to ConfigureServices in Startup.cs :

services.AddScoped<SliderInterop>();

snippet source | anchor

In .NET 6: Add the following to Program.cs:

services.AddScoped<SliderInterop>();

snippet source | anchor

For Blazor WebAssembly:

Add the following to Main() in Program.cs:

builder.Services.AddScoped<SliderInterop>();

snippet source | anchor

Simple Vertical Split:

@page "/"

<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="75">
        <LeftChildContent>
            <div style="padding:10px;">
                <h3>Left Content</h3>
                This is a demo of a single vertical slider panel.
            </div>
        </LeftChildContent>
        <RightChildContent>
            <div style="padding:10px;">
                <h3>Right Content</h3>
                <NavMenu />
            </div>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>

snippet source | anchor

Simple Horizontal Split:

@page "/horizontals"

<AbsolutePanel AutoResize="true">
    <HorizontalSliderPanel TopPanelHeight="200">
        <TopChildContent>
            <div style="padding:10px;">
                <h3>Top Content</h3>
                This is a demo of a single horizontal slider panel.
            </div>
        </TopChildContent>
        <BottomChildContent>
            <div style="padding:10px;">
                <h3>Bottom Content</h3>
                <NavMenu />
            </div>
        </BottomChildContent>
    </HorizontalSliderPanel>
</AbsolutePanel>

snippet source | anchor

Four Panels:

@page "/fourpanels"

<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel LeftPanelStartingWidth="400">
        <LeftChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Left"
                                   TopStyleString="background-color:antiquewhite;"
                                   BottomStyleString="background-color:aliceblue;"
                                   TopPanelHeight="200">
                <TopChildContent>
                    <div style="padding:10px;">
                        <h3>Top Content 1</h3>
                        This is a demo of four panels with styling
                    </div>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 1</h3>
                        <NavMenu />
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </LeftChildContent>
        <RightChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Right"
                                   TopStyleString="background-color:orange;"
                                   BottomStyleString="background-color:yellow;"
                                   TopPanelHeight="400">
                <TopChildContent>
                    <div style="padding:10px;">
                        <h3>Top Content 2</h3>
                    </div>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 2</h3>
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>

snippet source | anchor

Initial size and position based on percent size of browser:

@page "/windowresize"

<Window WindowResized="OnWindowResized" />

@(WindowSize != null)
{
<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel LeftPanelStartingWidth="@VerticalLeftPanelWidth">
        <LeftChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Left"
                                   TopStyleString="background-color:antiquewhite;"
                                   BottomStyleString="background-color:aliceblue;"
                                   TopPanelHeight="@LeftHorizontalTopPanelHeight">
                <TopChildContent>
                    <div style="padding:10px;">
                        <h3>Top Content 1</h3>
                        This demo sets the location of the sliders based on a percentage of the
                        initial size of the browser.
                    </div>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 1</h3>
                        <NavMenu />
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </LeftChildContent>
        <RightChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Right"
                                   TopStyleString="background-color:orange;"
                                   BottomStyleString="background-color:yellow;"
                                   TopPanelHeight="@RightHorizontalTopPanelHeight">
                <TopChildContent>
                    <div style="padding:10px;">
                        <h3>Top Content 2</h3>
                    </div>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 2</h3>
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>
}

@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

Alternate Method for Defining Panels by Percentage of Containing Element

Alternatively, you can define the property HeightUnit or WidthUnit (depending on if you're defining a horizontal panel or vertical panel) to SizeUnit.Percent and then set the initial percent for either the TopPanelHeight or LeftPanelStartingWidth properties.

This method finds the width or height of the containing element and calculates the left panel's width or top panel's height.

@page "/goldenratio"


<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="62">
        <LeftChildContent>
            <div style="padding:10px;">
                <h3>Approximate Golden Ratio Example</h3>
                <NavMenu />
            </div>
        </LeftChildContent>
        <RightChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Right" HeightUnit="SizeUnit.Percent" TopPanelHeight="62">
                <BottomChildContent>
                    <VerticalSliderPanel PanelPosition="PanelPosition.Bottom" WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="38">
                        <LeftChildContent>
                            <HorizontalSliderPanel PanelPosition="PanelPosition.Left" HeightUnit="SizeUnit.Percent" TopPanelHeight="38">
                                <TopChildContent>
                                    <VerticalSliderPanel PanelPosition="PanelPosition.Bottom" WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="62" MinimumRightPanelWidth="100" MinimumLeftPanelWidth="100">
                                        <RightChildContent>
                                            <HorizontalSliderPanel PanelPosition="PanelPosition.Right" HeightUnit="SizeUnit.Percent" TopPanelHeight="50" MinimumBottomPanelHeight="100" MinimumTopPanelHeight="100">

                                            </HorizontalSliderPanel>
                                        </RightChildContent>
                                    </VerticalSliderPanel>
                                </TopChildContent>
                            </HorizontalSliderPanel>
                        </LeftChildContent>
                    </VerticalSliderPanel>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>

@code {

}

snippet source | anchor

Define Width/Height by Rem Units

Another option for the HeightUnit and WidthUnit is SizeUnit.Rem which allows the user to define the initial width/height of a panel by rem units (this assumes the default of 16px per 1 rem).

Custom Class Setup:

To add custom classes to the panels, add classes with the parameter TopClassString, BottomClassString, LeftClassString, or RightClassString. These classes cannot be defined in the isolated page css file (i.e. Page.razor.css) as the nested component won't be recognized as part of the page at compile time.

To add custom classes to the slider, set the OverrideSliderStyle parameter to true and add the classes to the parameter SliderClassCss. When overriding the slider's base css class, make sure to define a slider background color as well as a cursor to indicate the slider is draggable.

@page "/customclasses"

<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel LeftPanelStartingWidth="400" 
                         OverrideSliderStyle="true" 
                         LeftClassString="@leftClasses" 
                         RightClassString="@rightClasses" 
                         SliderClassString="custom-slider">
        <LeftChildContent>
            <div style="padding:10px;">
                <h3>Left Content</h3>
                This is a demo of custom class styling for the panels and slider.
            </div>
        </LeftChildContent>
        <RightChildContent>
            <div style="padding:10px;">
                <h3>Right Content</h3>
                <NavMenu />
            </div>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>

@code {

    string leftClasses = "panel-base left-panel";
    string rightClasses = "panel-base right-panel";

}

snippet source | anchor

Containing the Panels to Its Parent Container:

To contain the overall panel system to its parent container, set the parameter ParentContained to true in the Absolute Panel component. It is necessary to specify the parent's css position property to ensure the Absolute Panel will be contained within the parent div.

Ensure the parent container also has a defined height and width (in the example provided, the height is set to 100vh - 2rem where 2rem is the height of the sample top bar and the width is set to 100vw - 20rem where 20rem is the width of the sample side container).

@page "/parentcontained"

<div class="page">
    <div class="top-nav">
        <ul>
            <li> <a href="#">Link 1</a></li>
            <li> <a href="#">Link 2</a></li>
            <li> <a href="#">Link 3</a></li>
        </ul>
    </div>
    <div class="content-wrapper">
        <div class="side-sample">
            <h3>This is a sample sidebar that doesn't live in the adjustable panels</h3>
        </div>
        <div class="panels-parent">
            <AbsolutePanel AutoResize="true" ParentContained="true">
                <VerticalSliderPanel LeftPanelStartingWidth="600">
                    <LeftChildContent>
                        <VerticalSliderPanel PanelPosition="PanelPosition.Left" LeftPanelStartingWidth="400">
                            <LeftChildContent>
                                <div style="padding:10px;">
                                    <h3>Left Content in the Left Parent Panel</h3>
                                    This is a demo of a nested vertical slider panel.
                                </div>
                            </LeftChildContent>
                            <RightChildContent>
                                <div style="padding:10px;">
                                    <h3>Right Content in the Left Parent Panel</h3>
                                </div>
                            </RightChildContent>
                        </VerticalSliderPanel>
                    </LeftChildContent>
                    <RightChildContent>
                        <VerticalSliderPanel PanelPosition="PanelPosition.Right" LeftPanelStartingWidth="400">
                            <LeftChildContent>
                                <div style="padding:10px;">
                                    <h3>Left Content in the Right Parent Panel</h3>
                                </div>
                            </LeftChildContent>
                            <RightChildContent>
                                <div style="padding:10px;">
                                    <h3>Right Content in the Right Parent Panel</h3>
                                    <NavMenu />
                                </div>
                            </RightChildContent>
                        </VerticalSliderPanel>

                    </RightChildContent>
                </VerticalSliderPanel>
            </AbsolutePanel>
        </div>
    </div>

</div>

@code {

}

snippet source | anchor

body {
}

.page{
    display: flex;
    flex-wrap: wrap;
}

.top-nav{
    flex: 0 0 100%;
    height: 2rem;
    background-color: gray;

}
.top-nav ul{
    margin-left: auto;
    margin-right: auto;
    max-width: 20rem;
    display: flex;
    list-style-type: none;
    justify-content: space-between;
}
.top-nav li{
    text-decoration: none;
}

.content-wrapper{
    display: flex;
}

.side-sample{
    width: 20rem;
    height: calc(100vh - 2rem);
    background-color: antiquewhite;
}

.panels-parent{
    position: relative;
    width: calc(100vw - 20rem);
    height: calc(100vh - 2rem);
}

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:

@page "/doublevertical"


        <AbsolutePanel AutoResize="true">
            <VerticalSliderPanel WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="50">
                <LeftChildContent>
                    <VerticalSliderPanel PanelPosition="PanelPosition.Left" WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="25">
                        <LeftChildContent>
                            <div style="padding:10px;">
                                <h3>Left Content in the Left Parent Panel</h3>
                                This is a demo of a nested vertical slider panel.
                            </div>
                        </LeftChildContent>
                        <RightChildContent>
                            <div style="padding:10px;">
                                <h3>Right Content in the Left Parent Panel</h3>
                            </div>
                        </RightChildContent>
                    </VerticalSliderPanel>
                </LeftChildContent>
                <RightChildContent>
                    <VerticalSliderPanel PanelPosition="PanelPosition.Right" WidthUnit="SizeUnit.Percent" LeftPanelStartingWidth="50">
                        <LeftChildContent>
                            <div style="padding:10px;">
                                <h3>Left Content in the Right Parent Panel</h3>
                            </div>
                        </LeftChildContent>
                        <RightChildContent>
                            <div style="padding:10px;">
                                <h3>Right Content in the Right Parent Panel</h3>
                                <NavMenu />
                            </div>
                        </RightChildContent>
                    </VerticalSliderPanel>

                </RightChildContent>
            </VerticalSliderPanel>
        </AbsolutePanel>

snippet source | anchor

Horizontal Panel Nested in Horizontal Panel:

@page "/doublehorizontal"


    <AbsolutePanel AutoResize="true">
        <HorizontalSliderPanel TopPanelHeight="400">
            <TopChildContent>
                <HorizontalSliderPanel PanelPosition="PanelPosition.Top" TopPanelHeight="200">
                    <TopChildContent>
                        <div style="padding:10px;">
                            <h3>Top Content in the Top Parent Panel</h3>
                            This is a demo of a nested horizontal slider panel.
                        </div>
                    </TopChildContent>
                    <BottomChildContent>
                        <div style="padding:10px;">
                            <h3>Bottom Content in the Top Parent Panel</h3>
                        </div>
                    </BottomChildContent>
                </HorizontalSliderPanel>
            </TopChildContent>
            <BottomChildContent>
                <HorizontalSliderPanel PanelPosition="PanelPosition.Bottom" TopPanelHeight="600">
                    <TopChildContent>
                        <div style="padding:10px;">
                            <h3>Top Content in the Bottom Parent Panel</h3>
                        </div>
                    </TopChildContent>
                    <BottomChildContent>
                        <div style="padding:10px;">
                            <h3>Bottom Content in the Bottom Parent Panel</h3>
                            <NavMenu />
                        </div>
                    </BottomChildContent>
                </HorizontalSliderPanel>
            </BottomChildContent>
        </HorizontalSliderPanel>
    </AbsolutePanel>

snippet source | anchor

Crazy Nesting Inception:

@page "/crazy"

<AbsolutePanel AutoResize="true">
    <VerticalSliderPanel LeftPanelStartingWidth="400">
        <LeftChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Left"
                                   TopStyleString="background-color:antiquewhite;"
                                   BottomStyleString="background-color:aliceblue;"
                                   TopPanelHeight="200">
                <TopChildContent>
                    <div style="padding:10px;">
                        <h3>Top Content 1</h3>
                        This is the craziest demo of all
                    </div>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 1</h3>
                        <NavMenu />
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </LeftChildContent>
        <RightChildContent>
            <HorizontalSliderPanel PanelPosition="PanelPosition.Right"
                                   BottomStyleString="background-color:violet;"
                                   TopPanelHeight="600">
                <TopChildContent>
                    <VerticalSliderPanel PanelPosition="PanelPosition.Top"
                                         LeftPanelStartingWidth="700">
                        <LeftChildContent>
                            <HorizontalSliderPanel PanelPosition="PanelPosition.Left"
                                                   TopStyleString="background-color:orange;"
                                                   BottomStyleString="background-color:lightblue;"
                                                   TopPanelHeight="300">
                                <TopChildContent>
                                    <div style="padding:10px;">
                                        <h3>Top Content 2</h3>
                                    </div>
                                </TopChildContent>
                                <BottomChildContent>
                                    <div style="padding:10px;">
                                        <h3>Bottom Content 2</h3>
                                    </div>
                                </BottomChildContent>
                            </HorizontalSliderPanel>
                        </LeftChildContent>
                        <RightChildContent>
                            <HorizontalSliderPanel PanelPosition="PanelPosition.Right"
                                                   TopStyleString="background-color:pink;"
                                                   BottomStyleString="background-color:lightgreen;"
                                                   TopPanelHeight="400">
                                <TopChildContent>
                                    <div style="padding:10px;">
                                        <h3>Top Content 3</h3>
                                    </div>
                                </TopChildContent>
                                <BottomChildContent>
                                    <div style="padding:10px;">
                                        <h3>Bottom Content 3</h3>
                                    </div>
                                </BottomChildContent>
                            </HorizontalSliderPanel>
                        </RightChildContent>
                    </VerticalSliderPanel>
                </TopChildContent>
                <BottomChildContent>
                    <div style="padding:10px;">
                        <h3>Bottom Content 4</h3>
                    </div>
                </BottomChildContent>
            </HorizontalSliderPanel>
        </RightChildContent>
    </VerticalSliderPanel>
</AbsolutePanel>

snippet source | anchor

NavMenu used in demos:

<div>
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="oi oi-resize-width" aria-hidden="true"></span> Vertical
    </NavLink>
    <NavLink class="nav-link" href="horizontals">
        <span class="oi oi-resize-height" aria-hidden="true"></span> Horizontal
    </NavLink>
    <NavLink class="nav-link" href="fourpanels">
        <span class="oi oi-resize-both" aria-hidden="true"></span> 4 Panels
    </NavLink>
    <NavLink class="nav-link" href="windowresize">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Percent Width
    </NavLink>
    <NavLink class="nav-link" href="crazy">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Crazy
    </NavLink>
    <NavLink class="nav-link" href="doublevertical">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Double Vertical
    </NavLink>
    <NavLink class="nav-link" href="doublehorizontal">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Double Horizontal
    </NavLink>
    <NavLink class="nav-link" href="customclasses">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Custom Classes
    </NavLink>
    <NavLink class="nav-link" href="parentcontained">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Parent Contained
    </NavLink>
    <NavLink class="nav-link" href="goldenratio">
        <span class="oi oi-resize-both" aria-hidden="true"></span> Golden Ratio
    </NavLink>
</div>

snippet source | anchor

Icon

slide designed by Eucalyp from The Noun Project. Licensed under Creative Commons.

About

Create multiple panels with horizontal and vertical splitters

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • HTML 56.7%
  • C# 23.0%
  • JavaScript 13.3%
  • CSS 7.0%