ModelingEvolution.Blazor.Splitter 1.0.6

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package ModelingEvolution.Blazor.Splitter --version 1.0.6
                    


                    

                
NuGet\Install-Package ModelingEvolution.Blazor.Splitter -Version 1.0.6
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="ModelingEvolution.Blazor.Splitter" Version="1.0.6" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="ModelingEvolution.Blazor.Splitter" Version="1.0.6" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="ModelingEvolution.Blazor.Splitter" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add ModelingEvolution.Blazor.Splitter --version 1.0.6
                    


                    

                
#r "nuget: ModelingEvolution.Blazor.Splitter, 1.0.6"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package ModelingEvolution.Blazor.Splitter@1.0.6
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=ModelingEvolution.Blazor.Splitter&version=1.0.6
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=ModelingEvolution.Blazor.Splitter&version=1.0.6
                    


                            Install as a Cake Tool

ModelingEvolution.Blazor.Splitter

NuGet

A lightweight, standalone Blazor splitter component for creating resizable panels.

Features

  • Horizontal and Vertical orientations
  • Drag to resize with smooth 60fps performance
  • Min/Max constraints for panel sizes
  • Collapsible panels (double-click or buttons)
  • Keyboard accessible (arrow keys)
  • No framework dependencies (works with any Blazor app)

Installation

dotnet add package ModelingEvolution.Blazor.Splitter

Usage

@using ModelingEvolution.Blazor.Splitter

<Splitter Orientation="Orientation.Horizontal"
          Size="300px"
          Min1="100px"
          Max1="500px"
          Min2="200px"
          Collapsible="true"
          SizeChanged="OnSizeChanged">
    <FirstPanel>
        
        <div>Sidebar content</div>
    </FirstPanel>
    <SecondPanel>
        
        <div>Main content</div>
    </SecondPanel>
</Splitter>

@code {
    private void OnSizeChanged(string size)
    {
        Console.WriteLine($"New size: {size}");
    }
}

Parameters

Parameter Type Default Description
Orientation Orientation Horizontal Layout direction
Size string "50%" Initial first panel size (px or %)
Min1 string? null First panel minimum
Max1 string? null First panel maximum
Min2 string? null Second panel minimum
Max2 string? null Second panel maximum
BarSize string "4px" Divider thickness
BarColor string? null Divider background color (e.g., "#ccc", "blue")
Collapsible bool false Enable collapse on double-click
ShowCollapseButtons bool? null Show collapse buttons (defaults to Collapsible)
Class string? null Additional CSS class
Style string? null Additional inline style

Events

Event Type Description
SizeChanged EventCallback<string> Fired when size changes
OnCollapse EventCallback<int> Fired when panel collapses (0 or 1)

Nested Splitters

You can nest splitters to create complex layouts:

<Splitter Orientation="Orientation.Horizontal" Size="250px">
    <FirstPanel>
        <div>Sidebar</div>
    </FirstPanel>
    <SecondPanel>
        <Splitter Orientation="Orientation.Vertical" Size="60%">
            <FirstPanel>
                <div>Main content</div>
            </FirstPanel>
            <SecondPanel>
                <div>Details panel</div>
            </SecondPanel>
        </Splitter>
    </SecondPanel>
</Splitter>

Blazor Server

For Blazor Server apps, ensure interactive rendering is enabled on the page:

@rendermode InteractiveServer

License

MIT

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.6 193 12/19/2025
1.0.5 194 12/19/2025
1.0.4 191 12/19/2025
1.0.3 193 12/19/2025
1.0.2 192 12/19/2025
1.0.1 200 12/19/2025