Blazorme.Split 26.9.14

Blazorme.Split

Split component library for Blazor apps. The library provides resizeable split views (panes).

Requires .NET 10. Earlier versions targeted netstandard2.1 and net5.0, which are no longer supported.

Use DemoApp as a reference for your implementation.

Implementation

Currently the library interops by using the split.js package: GitHub, jsdelivr

Installation

• Install NuGet package:

  Install-Package Blazorme.Split

• Using:

In _Imports.razor add:

  @using Blazorme

• JS reference:

None required. Since 26.9.8 the package ships Split.js and loads it on demand, so there is nothing to add to index.html or _Host.cshtml.

Earlier versions required a CDN script tag, and omitting it failed at runtime with a JS interop error. If your app still has it that remains harmless: the loader skips loading when the global is already defined.

The bundled component and its licence are listed in THIRD-PARTY-NOTICES.txt inside the package.

Usage

In your Blazor page, add the top level Split entry and SplitPane sub-entires to form the split view. Here is a simple example:

<div class="container-fluid border border-primary" style="width: 100%; height: 600px">
    <Split>
        <SplitPane SizeInPercentage="20" MinSize="0">
            One
        </SplitPane>
        <SplitPane SizeInPercentage="50" MinSize="0">
            Two
        </SplitPane>
        <SplitPane SizeInPercentage="30" MinSize="0">
            Three
        </SplitPane>
    </Split>
</div>

Parameters

    public enum SplitDirection
    {
        Horizontal,
        Vertical
    }

    public enum SplitGutterAlign
    {
        Center,
        Start,
        End,
    }

Split

SplitPane

Example

From demo app:

<div class="container-fluid border border-primary" style="width: 100%; height: 600px">
    <Split GutterSize="5">
        <SplitPane SizeInPercentage="20" MinSize="0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ullamcorper ipsum, at blandit leo. Sed egestas est tellus, nec rutrum leo ultricies vitae. Praesent scelerisque libero in lacus gravida, a ultrices tortor rutrum. Donec et justo nibh. Nulla congue volutpat sapien, eu pretium sapien porttitor id. Vivamus sit amet aliquet libero. Vestibulum sit amet ex pharetra, dapibus enim nec, ullamcorper metus. Integer pellentesque aliquam aliquet.
        </SplitPane>
        <SplitPane SizeInPercentage="50" MinSize="0">
            <Split Direction=@SplitDirection.Vertical GutterSize="5">
                <SplitPane MinSize="0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ullamcorper ipsum, at blandit leo. Sed egestas est tellus, nec rutrum leo ultricies vitae. Praesent scelerisque libero in lacus gravida, a ultrices tortor rutrum. Donec et justo nibh. Nulla congue volutpat sapien, eu pretium sapien porttitor id. Vivamus sit amet aliquet libero. Vestibulum sit amet ex pharetra, dapibus enim nec, ullamcorper metus. Integer pellentesque aliquam aliquet.
                </SplitPane>
                <SplitPane MinSize="0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ullamcorper ipsum, at blandit leo. Sed egestas est tellus, nec rutrum leo ultricies vitae. Praesent scelerisque libero in lacus gravida, a ultrices tortor rutrum. Donec et justo nibh. Nulla congue volutpat sapien, eu pretium sapien porttitor id. Vivamus sit amet aliquet libero. Vestibulum sit amet ex pharetra, dapibus enim nec, ullamcorper metus. Integer pellentesque aliquam aliquet.
                </SplitPane>
            </Split>
        </SplitPane>
        <SplitPane SizeInPercentage="30" MinSize="0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ullamcorper ipsum, at blandit leo. Sed egestas est tellus, nec rutrum leo ultricies vitae. Praesent scelerisque libero in lacus gravida, a ultrices tortor rutrum. Donec et justo nibh. Nulla congue volutpat sapien, eu pretium sapien porttitor id. Vivamus sit amet aliquet libero. Vestibulum sit amet ex pharetra, dapibus enim nec, ullamcorper metus. Integer pellentesque aliquam aliquet.
        </SplitPane>
    </Split>
</div>