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:

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();
        }
    }
}

Methods

• Resizable(Action onResizeEnd = null)
  Enables drag-resizing for the split view panels. Optionally, you can provide a callback that receives the final width of the resized panel in pixels.
  • Parameters:
  - onResizeEnd: An Action callback invoked when resizing ends.

• NotResizable()
  Disables the resizable behavior by removing the drag event bindings and resetting the splitter's style.

• Left(IComponent component, string background = "")
  Sets the left pane content of the split view. An optional background string can be specified.
  • Parameters:
  - component: The IComponent to display in the left panel.
  - background: (Optional) A CSS background value.

• Right(IComponent component, string background = "")
  Sets the right pane content of the split view. An optional background string can be specified.
  • Parameters:
  - component: The IComponent to display in the right panel.
  - background: (Optional) A CSS background value.

• PanelStyle()
  Applies a panel style to the split view by adding a specific CSS class.

• SplitInMiddle()
  Adjusts the split view such that both panels share the available space equally, by removing any side-specific styling.

• Close()
  Closes the currently collapsed (smaller) panel. It throws an exception if the split view is not configured as a left or right split.

• Open()
  Opens the currently collapsed panel. It throws an exception if the split view is not configured as a left or right split.

• LeftIsSmaller(UnitSize leftSize, UnitSize maxLeftSize = null, UnitSize minLeftSize = null)
  Configures the split view such that the left panel has a fixed or smaller size relative to the right panel.
  • Parameters:
  - leftSize: The desired width for the left panel.
  - maxLeftSize: (Optional) The maximum width allowed for the left panel.
  - minLeftSize: (Optional) The minimum width allowed for the left panel.

• RightIsSmaller(UnitSize rightSize, UnitSize maxRightSize = null, UnitSize minRightSize = null)
  Configures the split view such that the right panel has a fixed or smaller size relative to the left panel.
  • Parameters:
  - rightSize: The desired width for the right panel.
  - maxRightSize: (Optional) The maximum width allowed for the right panel.
  - minRightSize: (Optional) The minimum width allowed for the right panel.

• Render()
  Renders and returns the underlying HTMLElement representing the split view.

Public Properties

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

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.

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.

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();
        }
    }
}

See also

• Button
• Stack
• TextBlock