ModelingEvolution.Blazor.Splitter 1.0.6
ModelingEvolution.Blazor.Splitter
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>
<!-- Left/Top content -->
<div>Sidebar content</div>
</FirstPanel>
<SecondPanel>
<!-- Right/Bottom content -->
<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