Tesserae

HorizontalSplitView

Description

Divides space into top and bottom panes with an optional resizable divider

HorizontalSplitView divides a container into a top pane and a bottom pane separated by a thin splitter bar. It is well-suited for editor/preview layouts, terminal-style interfaces, or any surface where two stacked areas need to coexist.

The divider can be made interactive so users can drag it to redistribute space between the two panes at runtime.

Samples

Basic Non-Resizable Split

horizontal-split-view-basic-sample.js

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 component = HorizontalSplitView()
               .Top(Stack().S().Background(Theme.Colors.Neutral100).Children(TextBlock("Top Pane").Bold().AlignCenter()))
               .Bottom(Stack().S().Background(Theme.Colors.Neutral200).Children(TextBlock("Bottom Pane").Bold().AlignCenter()))
               .WS().H(300);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Resizable Split (drag the divider)

horizontal-split-view-resizable-sample.js

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 component = HorizontalSplitView()
               .Top(Stack().S().Background(Theme.Colors.Neutral100).Children(TextBlock("Editor").Bold().AlignCenter()))
               .Bottom(Stack().S().Background(Theme.Colors.Neutral200).Children(TextBlock("Preview").Bold().AlignCenter()))
               .Resizable(height => Toast().Information($"Top pane resized to {height}px"))
               .WS().H(300);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Top Pane Fixed, Bottom Grows

horizontal-split-view-top-fixed-sample.js

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 component = HorizontalSplitView()
               .Top(Stack().S().Background(Theme.Colors.Blue100).Children(TextBlock("Fixed Header (80px)").Bold().AlignCenter()))
               .Bottom(Stack().S().Background(Theme.Colors.Neutral200).Children(TextBlock("Grows to fill").Bold().AlignCenter()))
               .TopIsSmaller(80.px())
               .WS().H(200);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Bottom Pane Fixed, Top Grows

horizontal-split-view-bottom-fixed-sample.js

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 component = HorizontalSplitView()
               .Top(Stack().S().Background(Theme.Colors.Neutral200).Children(TextBlock("Grows to fill").Bold().AlignCenter()))
               .Bottom(Stack().S().Background(Theme.Colors.Blue100).Children(TextBlock("Fixed Footer (80px)").Bold().AlignCenter()))
               .BottomIsSmaller(80.px())
               .WS().H(200);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}