SplitJs.Blazor
A component wrapper of split.js for Blazor.
See also https://github.com/nathancahill/split/tree/master/packages/splitjs
Installation
Installation is super easy.
- Add Nuget Package
dotnet add package SplitJs.Blazor
- Add namespace reference to your
_Imports.razor
@using SplitJs.Blazor.Components
- Enable Nullable in your project
<Nullable>enable</Nullable>
Components
This component lib has 4 components in all.
<SplitZone>
First, you need to place <SplitZone>
anyway.
Why this component is required is because this component has some basic CSS classes, which are necessary to work with split.js.
<Horizontal>
This component will render children <Split>
component as horizontally split columns.
<Vertical>
This component will render children <Split>
component as vertically split rows.
<Split>
This component is the most basic component that will be rendered as split columns/rows working with <Horizontal>
or <Vertical>
components.
Sample
<SplitZone Style="width:500px; height: 600px; border: 5px solid white; float:left">
<Horizontal GutterStyle="background-color: gray;">
<Split MinSizePx="0" Style="background-color:#b6ff00">
<h1>
Hello!
</h1>
</Split>
<Split MinSizePx="0">
<Vertical>
<Split Size="40" MinSizePx="0" Style="background-color:#ea9797;">
<h1>Blazor</h1>
</Split>
<Split Size="60" MinSizePx="0" Style="background-color:#639ac8;">
<h1>Split.js</h1>
</Split>
</Vertical>
</Split>
</Horizontal>
</SplitZone>
<style>
split {
box-shadow: rgba(0,0,0,.1) 0 0 5px 5px inset;
}
horizontal {
border: 2px dashed blue;
}
vertical {
border: 2px groove green;
}
</style>
<SplitZone Style="width:500px; height: 600px; border: 5px solid white; float:left">
<Vertical>
<Split MinSizePx="0" Style="background-color:#b6ff00">
<h1>
Hello!
</h1>
</Split>
<Split MinSizePx="0">
<Horizontal>
<Split Size="40" MinSizePx="0" Style="background-color:#ea9797;">
<h1>Blazor</h1>
</Split>
<Split Size="60" MinSizePx="0" Style="background-color:#639ac8;">
<h1>Split.js</h1>
</Split>
</Horizontal>
</Split>
</Vertical>
</SplitZone>
This page will be rendered like
Special Thanks
Split.js author https://github.com/nathancahill/