Tesserae - Horizontal Split View

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.

API reference

class

HorizontalSplitView

public class HorizontalSplitView : IComponent

A horizontal split pane with a draggable handle that resizes a left and right pane.

Constructors

Constructor

HorizontalSplitView

public HorizontalSplitView(UnitSize splitterSize = null)

Initializes a new instance of this class.

Methods

Method

HorizontalSplitView.Resizable

public HorizontalSplitView Resizable(Action<int> onResizeEnd = null)

Configures the component to resizable.

Method

HorizontalSplitView.Top

public HorizontalSplitView Top(IComponent component, string background = "")

Aligns the content of the component to the top.

Method

HorizontalSplitView.Bottom

public HorizontalSplitView Bottom(IComponent component, string background = "")

Aligns the content of the component to the bottom.

Method

HorizontalSplitView.PanelStyle

public HorizontalSplitView PanelStyle()

Renders the split view using the panel-style border treatment.

Method

HorizontalSplitView.NotResizable

public HorizontalSplitView NotResizable()

Disables resizing of the split view's handle.

Method

HorizontalSplitView.SplitInMiddle

public HorizontalSplitView SplitInMiddle()

Splits the view exactly in the middle by default.

Method

HorizontalSplitView.Close

public HorizontalSplitView Close()

Closes the component.

Method

HorizontalSplitView.Open

public HorizontalSplitView Open()

Opens the component.

Method

HorizontalSplitView.TopIsSmaller

public HorizontalSplitView TopIsSmaller(UnitSize topSize, UnitSize maxTopSize = null, UnitSize minTopSize = null)

Sizes the split view so the top pane is the smaller of the two, with optional min/max bounds.

Method

HorizontalSplitView.BottomIsSmaller

public HorizontalSplitView BottomIsSmaller(UnitSize bottomSize, UnitSize maxBottomSize = null, UnitSize minBottomSize = null)

Sizes the split view so the bottom pane is the smaller of the two, with optional min/max bounds.

Method

HorizontalSplitView.Render

public HTMLElement Render()

Renders the component's root HTML element.

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

HorizontalSplitView

Description

API reference

Constructors

HorizontalSplitView

Methods

HorizontalSplitView.Resizable

HorizontalSplitView.Top

HorizontalSplitView.Bottom

HorizontalSplitView.PanelStyle

HorizontalSplitView.NotResizable

HorizontalSplitView.SplitInMiddle

HorizontalSplitView.Close

HorizontalSplitView.Open

HorizontalSplitView.TopIsSmaller

HorizontalSplitView.BottomIsSmaller

HorizontalSplitView.Render

Samples

Basic Non-Resizable Split

Resizable Split (drag the divider)

Top Pane Fixed, Bottom Grows

Bottom Pane Fixed, Top Grows

See also