Tesserae - Stack

Stack

Description

A Stack is a container component that abstracts the implementation of a flexbox to layout its children components. It is useful for grouping other components, arranging them either vertically or horizontally (with optional reverse orders), and providing various alignment, wrapping, and spacing options. Use it when you need to arrange components in a flexible, responsive layout in your UI.

Usage

Instantiate a Stack using the Tesserae fluent interface via the static helper method. For example, call Stack() and chain configuration methods to set orientation, alignment, and wrapping as needed.

stack-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 MyComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MyComponent : IComponent
    {
        public HTMLElement Render()
        {
            // Create a vertical stack and add two buttons to it.
            var stack = Stack().Vertical().AlignItemsCenter().NoWrap();
            stack.Add(Button("Button 1"));
            stack.Add(Button("Button 2"));
            return stack.Render();
        }
    }
}

API reference

class

Stack

public class Stack : IContainer<Stack, IComponent>, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling, ICanWrap, IRoundedStyle

A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

Constructors

Constructor

Stack

public Stack(Orientation orientation = Orientation.Vertical)

Initializes a new instance of the class.

Parameters

orientation: The stack orientation.

Properties

Property

Stack.StackOrientation

public Orientation StackOrientation { get ; set ; }

Gets or sets the stack orientation.

Property

Stack.CanWrap

public bool CanWrap { get ; set ; }

Gets or sets whether the stack can wrap its children.

Property

Stack.IsInline

public bool IsInline { get ; set ; }

Gets or sets whether the stack is displayed as an inline-flex.

Property

Stack.InnerElement

public HTMLElement InnerElement { get; private set; }

Gets the inner element.

Property

Stack.Background

public string Background { get ; set ; }

Gets or sets the background color.

Property

Stack.Margin

public string Margin { get ; set ; }

Gets or sets the margin.

Property

Stack.Padding

public string Padding { get ; set ; }

Gets or sets the padding.

Property

Stack.StylingContainer

public HTMLElement StylingContainer

Gets the styling container.

Property

Stack.PropagateToStackItemParent

public bool PropagateToStackItemParent { get; private set; }

Gets or sets whether to propagate styling to the stack item parent.

Methods

Method

Stack.SetAlign

public static void SetAlign(IComponent component, ItemAlign align)

Sets the alignment for a component within a stack.

Parameters

component: The component.
align: The alignment.

Method

Stack.SetJustify

public static void SetJustify(IComponent component, ItemJustify align)

Sets the justification for a component within a stack.

Parameters

component: The component.
align: The justification.

Method

Stack.AlignItems

public Stack AlignItems(ItemAlign align)

Sets the align-items CSS property for this stack.

Parameters

align: The alignment.

Returns

The current instance.

Method

Stack.AlignItemsCenter

public Stack AlignItemsCenter()

Sets the align-items CSS property for this stack to 'center'.

Returns

The current instance.

Method

Stack.Relative

public Stack Relative()

Make this stack relative (i.e. position:relative).

Returns

The current instance.

Method

Stack.Gap

public Stack Gap(UnitSize gapSize)

Sets the gap between both rows and columns for the stack layout.

Parameters

gapSize: The size of the gap to apply between items.

Method

Stack.RowGap

public Stack RowGap(UnitSize gapSize)

Sets the vertical spacing (row gap) between items in the stack layout.

Parameters

gapSize: The size of the gap to apply between rows.

Method

Stack.ColumnGap

public Stack ColumnGap(UnitSize gapSize)

Sets the horizontal spacing (column gap) between items in the stack layout.

Parameters

gapSize: The size of the gap to apply between columns.

Method

Stack.AlignContent

public Stack AlignContent(ItemAlign align)

Sets the align-content CSS property for this stack.

Parameters

align: The alignment.

Returns

The current instance.

Method

Stack.JustifyContent

public Stack JustifyContent(ItemJustify justify)

Sets the justify-content CSS property for this stack.

Parameters

justify: The justification.

Returns

The current instance.

Method

Stack.JustifyItems

public Stack JustifyItems(ItemJustify justify)

Sets the justify-items CSS property for this stack.

Parameters

justify: The justification.

Returns

The current instance.

Method

Stack.RemovePropagation

public Stack RemovePropagation()

Disables propagation of styling to the stack item parent.

Returns

The current instance.

Method

Stack.SetWidth

public static void SetWidth(IComponent component, UnitSize unitSize)

Sets the width of a component within a stack.

Method

Stack.SetMinWidth

public static void SetMinWidth(IComponent component, UnitSize unitSize)

Sets the minimum width of a component within a stack.

Method

Stack.SetMaxWidth

public static void SetMaxWidth(IComponent component, UnitSize unitSize)

Sets the maximum width of a component within a stack.

Method

Stack.SetHeight

public static void SetHeight(IComponent component, UnitSize unitSize)

Sets the height of a component within a stack.

Method

Stack.SetMinHeight

public static void SetMinHeight(IComponent component, UnitSize unitSize)

Sets the minimum height of a component within a stack.

Method

Stack.SetMaxHeight

public static void SetMaxHeight(IComponent component, UnitSize unitSize)

Sets the maximum height of a component within a stack.

Method

Stack.SetMarginLeft

public static void SetMarginLeft(IComponent component, UnitSize unitSize)

Sets the left margin of a component within a stack.

Method

Stack.SetMarginRight

public static void SetMarginRight(IComponent component, UnitSize unitSize)

Sets the right margin of a component within a stack.

Method

Stack.SetMarginTop

public static void SetMarginTop(IComponent component, UnitSize unitSize)

Sets the top margin of a component within a stack.

Method

Stack.SetMarginBottom

public static void SetMarginBottom(IComponent component, UnitSize unitSize)

Sets the bottom margin of a component within a stack.

Method

Stack.SetPaddingLeft

public static void SetPaddingLeft(IComponent component, UnitSize unitSize)

Sets the left padding of a component within a stack.

Method

Stack.SetPaddingRight

public static void SetPaddingRight(IComponent component, UnitSize unitSize)

Sets the right padding of a component within a stack.

Method

Stack.SetPaddingTop

public static void SetPaddingTop(IComponent component, UnitSize unitSize)

Sets the top padding of a component within a stack.

Method

Stack.SetPaddingBottom

public static void SetPaddingBottom(IComponent component, UnitSize unitSize)

Sets the bottom padding of a component within a stack.

Method

Stack.SetGrow

public static void SetGrow(IComponent component, int grow)

Sets the flex-grow of a component within a stack.

Method

Stack.SetShrink

public static void SetShrink(IComponent component, bool shrink)

Sets the flex-shrink of a component within a stack.

Method

Stack.OnMouseOver

public Stack OnMouseOver(ComponentEventHandler<Stack, Event> onMouseOver)

Attaches a handler to the mouse over event.

Parameters

onMouseOver: The handler.

Returns

The current instance.

Method

Stack.OnMouseOut

public Stack OnMouseOut(ComponentEventHandler<Stack, Event> onMouseOut)

Attaches a handler to the mouse out event.

Parameters

onMouseOut: The handler.

Returns

The current instance.

Method

Stack.Add

public void Add(IComponent component)

Adds a component to the stack.

Parameters

component: The component.

Method

Stack.Prepend

public void Prepend(IComponent component)

Adds a component to the beginning of the stack.

Parameters

component: The component.

Method

Stack.InsertBefore

public void InsertBefore(IComponent component, IComponent componentToInsertBefore)

Inserts a component before another component in the stack.

Parameters

component: The component to insert.
componentToInsertBefore: The reference component.

Method

Stack.InsertAfter

public void InsertAfter(IComponent component, IComponent componentToInsertBefore)

Inserts a component after another component in the stack.

Parameters

component: The component to insert.
componentToInsertBefore: The reference component.

Method

Stack.Clear

public virtual void Clear()

Clears all children from the stack.

Method

Stack.Replace

public void Replace(IComponent newComponent, IComponent oldComponent)

Replaces a component in the stack.

Parameters

newComponent: The new component.
oldComponent: The old component.

Method

Stack.Remove

public void Remove(IComponent component)

Removes a component from the stack.

Parameters

component: The component.

Method

Stack.Render

public virtual HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Method

Stack.Horizontal

public Stack Horizontal()

Sets the stack orientation to horizontal.

Method

Stack.Vertical

public Stack Vertical()

Sets the stack orientation to vertical.

Method

Stack.HorizontalReverse

public Stack HorizontalReverse()

Sets the stack orientation to horizontal reverse.

Method

Stack.VerticalReverse

public Stack VerticalReverse()

Sets the stack orientation to vertical reverse.

Method

Stack.Wrap

public Stack Wrap()

Enables wrapping.

Method

Stack.Inline

public Stack Inline()

Sets the stack to be inline.

Method

Stack.NoWrap

public Stack NoWrap()

Disables wrapping.

Method

Stack.OverflowHidden

public Stack OverflowHidden()

Sets the overflow to hidden.

Method

Stack.NoDefaultMargin

public Stack NoDefaultMargin()

Removes the default component margin.

Method

Stack.Skeleton

public IComponent Skeleton(bool enabled = true)

Sets the skeleton state.

enum

ItemAlign

public enum ItemAlign

Represents the alignment of an item.

Values

Value

ItemAlign.Auto

Auto

Auto.

Value

ItemAlign.Stretch

Stretch

Stretch.

Value

ItemAlign.Baseline

Baseline

Baseline.

Value

ItemAlign.Start

Start

Start.

Value

ItemAlign.Center

Center

Center.

Value

ItemAlign.End

End

End.

enum

ItemJustify

public enum ItemJustify

Represents the justification of an item.

Values

Value

ItemJustify.Between

Between

Space between.

Value

ItemJustify.Around

Around

Space around.

Value

ItemJustify.Evenly

Evenly

Space evenly.

Value

ItemJustify.Start

Start

Start.

Value

ItemJustify.Center

Center

Center.

Value

ItemJustify.End

End

End.

Samples

Basic Vertical Stack Sample

The following sample demonstrates creating a vertical stack with two buttons. The Stack is configured to center its items and disallow wrapping.

stack-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 BasicStackSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicStackSample : IComponent
    {
        public HTMLElement Render()
        {
            var stack = Stack()
                .Vertical()
                .AlignItemsCenter()
                .NoWrap();

            stack.Add(Button("Button 1"));
            stack.Add(Button("Button 2"));

            return stack.Render();
        }
    }
}

Interactive Orientation Change Sample

This sample shows how to dynamically change the orientation of a Stack via user interaction.

stack-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 InteractiveStackSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class InteractiveStackSample : IComponent
    {
        public HTMLElement Render()
        {
            var stack = Stack().Vertical().AlignItemsCenter();
            stack.Add(Button("Item 1"));
            stack.Add(Button("Item 2"));
            stack.Add(Button("Item 3"));

            // Toggle stack orientation on button click
            var toggleButton = Button("Toggle Orientation").OnClick((s, e) =>
            {
                if (stack.StackOrientation == Stack.Orientation.Vertical)
                {
                    stack.Horizontal();
                }
                else
                {
                    stack.Vertical();
                }
            });

            // Add the toggle control at the top
            var container = Stack().Vertical().Children(toggleButton, stack);
            return container.Render();
        }
    }
}