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.

Samples

Basic Non-Resizable Split

horizontal-split-view-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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);
        }
    }
}

API reference

class

HorizontalSplitView

public class HorizontalSplitView : IComponent, ISpecialCaseStyling

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

Namespace: Tesserae
Implements: IComponent, ISpecialCaseStyling

Constructors

Name	Description
HorizontalSplitView	Initializes a new instance of this class.

Constructor

HorizontalSplitView

public HorizontalSplitView(UnitSize splitterSize = null)

Initializes a new instance of this class.

Properties

Name	Description
StylingContainer	Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via `ISpecialCaseStyling`) lets sizing helpers like .S() / .Grow() write directly onto the split view instead of an extra wrapper when it is placed inside a Stack or Grid.
PropagateToStackItemParent	Gets whether styling should propagate to the stack item parent.

Property

HorizontalSplitView.StylingContainer

public HTMLElement StylingContainer

Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via ISpecialCaseStyling) lets sizing helpers like .S() / .Grow() write directly onto the split view instead of an extra wrapper when it is placed inside a Stack or Grid.

Property

HorizontalSplitView.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

Methods

Name	Description
Resizable	Configures the component to resizable.
Top	Aligns the content of the component to the top.
Bottom	Aligns the content of the component to the bottom.
PanelStyle	Renders the split view using the panel-style border treatment.
NotResizable	Disables resizing of the split view's handle.
SplitInMiddle	Splits the view exactly in the middle by default.
Close	Closes the component.
Open	Opens the component.
TopIsSmaller	Sizes the split view so the top pane is the smaller of the two, with optional min/max bounds.
BottomIsSmaller	Sizes the split view so the bottom pane is the smaller of the two, with optional min/max bounds.
Render	Renders the component's root HTML element.

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.

HorizontalSplitView

Description

Samples

Basic Non-Resizable Split

Resizable Split (drag the divider)

Top Pane Fixed, Bottom Grows

Bottom Pane Fixed, Top Grows

API reference

Constructors

HorizontalSplitView

Properties

HorizontalSplitView.StylingContainer

HorizontalSplitView.PropagateToStackItemParent

Methods

HorizontalSplitView.Resizable

HorizontalSplitView.Top

HorizontalSplitView.Bottom

HorizontalSplitView.PanelStyle

HorizontalSplitView.NotResizable

HorizontalSplitView.SplitInMiddle

HorizontalSplitView.Close

HorizontalSplitView.Open

HorizontalSplitView.TopIsSmaller

HorizontalSplitView.BottomIsSmaller

HorizontalSplitView.Render

See also