Tesserae - Split View

SplitView

Description

The SplitView component creates a two-pane container that arranges two child components separated by a draggable splitter. This component is ideal for displaying resizable panels side-by-side (or top/bottom when using horizontal variations) within your UI. It is part of the Tesserae Components group, which provides various UI controls for building interactive interfaces.

Usage

Instantiate a SplitView using the helper method from Tesserae.UI. You can add content to the left and right panels using the Left() and Right() methods. By default, the splitter is non-resizable; calling Resizable() enables drag-to-resize functionality.

Below is a basic usage example:

split-view-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MySplitViewExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MySplitViewExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create SplitView instance
            var splitView = SplitView().H(60.vh()).W(60.vw())
                .Left(Stack().Children(TextBlock("Left panel content")).WS(), "lightgray")
                .Right(Stack().Children(TextBlock("Right panel content")).WS(), "whitesmoke")
                .Resizable();

            return splitView.Render();
        }
    }
}

Public Properties

There are no explicitly exposed public properties for the SplitView component. Configuration and state management are handled via its fluent interface methods.

API reference

class

SplitView

public class SplitView : IComponent

A vertical split view component.

Constructors

Constructor

SplitView

public SplitView(UnitSize splitterSize = null)

Initializes a new instance of the class.

Parameters

splitterSize: The size of the splitter.

Methods

Method

SplitView.Resizable

public SplitView Resizable(Action<int> onResizeEnd = null, string backgroundColor = null)

Sets the split view to be resizable.

Parameters

onResizeEnd: An optional action to perform when resizing ends.

Returns

The current instance.

Method

SplitView.Left

public SplitView Left(IComponent component, string background = "")

Sets the left component.

Parameters

component: The component.
background: The background color.

Returns

The current instance.

Method

SplitView.Right

public SplitView Right(IComponent component, string background = "")

Sets the right component.

Parameters

component: The component.
background: The background color.

Returns

The current instance.

Method

SplitView.PanelStyle

public SplitView PanelStyle()

Sets the panel style for the split view.

Returns

The current instance.

Method

SplitView.NotResizable

public SplitView NotResizable()

Sets the split view to be not resizable.

Returns

The current instance.

Method

SplitView.SplitInMiddle

public SplitView SplitInMiddle()

Splits the view in the middle.

Returns

The current instance.

Method

SplitView.Close

public SplitView Close()

Closes the split view.

Returns

The current instance.

Method

SplitView.Open

public SplitView Open()

Opens the split view.

Returns

The current instance.

Method

SplitView.LeftIsSmaller

public SplitView LeftIsSmaller(UnitSize leftSize, UnitSize maxLeftSize = null, UnitSize minLeftSize = null)

Sets the left component to be smaller.

Parameters

leftSize: The left size.
maxLeftSize: The maximum left size.
minLeftSize: The minimum left size.

Returns

The current instance.

Method

SplitView.RightIsSmaller

public SplitView RightIsSmaller(UnitSize rightSize, UnitSize maxRightSize = null, UnitSize minRightSize = null)

Sets the right component to be smaller.

Parameters

rightSize: The right size.
maxRightSize: The maximum right size.
minRightSize: The minimum right size.

Returns

The current instance.

Method

SplitView.Render

public HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Samples

Basic SplitView with Resizable Panels

This sample demonstrates how to create a SplitView, assign components to the left and right panels, and enable panel resizing on the fly.

split-view-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new SplitViewDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SplitViewDemo : IComponent
    {
        public HTMLElement Render()
        {
            // Create the SplitView component
            var splitView = SplitView()
                .Left(Stack().Children(TextBlock("This is the left panel")).S(), "lightgreen")
                .Right(Stack().Children(TextBlock("This is the right panel")).S(), "lightblue")
                .Resizable(onResizeEnd: newWidth => console.log($"Resized panel final width: {newWidth}px"));

            // Toggle resizable behavior with buttons (optional)
            var content = Stack().Children(
                HStack().Children(
                    Button("Enable Resizing").OnClick(() => splitView.Resizable()),
                    Button("Disable Resizing").OnClick(() => splitView.NotResizable())
                ),
                splitView
            ).S().P(10);

            return content.Render();
        }
    }
}

Configuring Side-Specific Panel Sizes

This sample shows how to configure the SplitView so that one of the panels is set to a fixed smaller width.

split-view-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new SplitViewSideSizeDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SplitViewSideSizeDemo : IComponent
    {
        public HTMLElement Render()
        {
            // Create a SplitView where the left panel is explicitly smaller
            var splitView = SplitView()
                .LeftIsSmaller(150.px())
                .Left(Stack().Children(TextBlock("Fixed left panel")).S().Background("#e0ffe0"), "#e0ffe0")
                .Right(Stack().Children(TextBlock("Flexible right panel")).S().Background("#e0e0ff"), "#e0e0ff")
                .Resizable();

            return splitView.Render();
        }
    }
}

SplitView

Description

Usage

Public Properties

API reference

Constructors

SplitView

Parameters

Methods

SplitView.Resizable

Parameters

Returns

SplitView.Left

Parameters

Returns

SplitView.Right

Parameters

Returns

SplitView.PanelStyle

Returns

SplitView.NotResizable

Returns

SplitView.SplitInMiddle

Returns

SplitView.Close

Returns

SplitView.Open

Returns

SplitView.LeftIsSmaller

Parameters

Returns

SplitView.RightIsSmaller

Parameters

Returns

SplitView.Render

Returns

Samples

Basic SplitView with Resizable Panels

Configuring Side-Specific Panel Sizes

See also