# Stack

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.

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.

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

• AlignItems(ItemAlign align)
  • Parameters:
  • align - An ItemAlign enum value specifying the CSS align-items property for the stack.
  • Returns: The current Stack instance for chaining.

• AlignItemsCenter()
  • Returns: The current Stack instance with align-items preset to center.

• Relative()
  • Returns: The current Stack instance with a CSS class applied to make the stack position relative.

• AlignContent(ItemAlign align)
  • Parameters:
  • align - The alignment value for the stack’s content.
  • Returns: The current Stack instance.

• JustifyContent(ItemJustify justify)
  • Parameters:
  • justify - The justification value (using ItemJustify) for the children components in the stack.
  • Returns: The current Stack instance.

• JustifyItems(ItemJustify justify)
  • Parameters:
  • justify - The justification value for each individual item in the stack.
  • Returns: The current Stack instance.

• RemovePropagation()
  • Returns: The current Stack instance. Disables the propagation of style properties to child stack items.

• Horizontal(), Vertical(), HorizontalReverse(), VerticalReverse()
  • These methods set the orientation of the Stack accordingly.
  • Each returns the current Stack instance.

• Wrap()
  • Returns: The current Stack instance with wrapping enabled (i.e. flex-wrap set to wrap).

• Inline()
  • Returns: The current Stack instance, setting the display property to inline-flex.

• NoWrap()
  • Returns: The current Stack instance with wrapping disabled.

• OverflowHidden()
  • Returns: The current Stack instance with its overflow hidden.

• NoDefaultMargin()
  • Returns: The current Stack instance with the default margin CSS class removed.

• OnMouseOver(ComponentEventHandler<Stack, Event> onMouseOver)
  • Parameters:
  • onMouseOver - A callback event handler to execute when the mouse is moved over the stack.
  • Returns: The current Stack instance.

• OnMouseOut(ComponentEventHandler<Stack, Event> onMouseOut)
  • Parameters:
  • onMouseOut - A callback event handler for the mouse out event.
  • Returns: The current Stack instance.

• Add(IComponent component)
  • Parameters:
  • component - The child component to add to the Stack.

• Prepend(IComponent component)
  • Parameters:
  • component - The child component to prepend to the Stack.

• InsertBefore(IComponent component, IComponent componentToInsertBefore)
  • Parameters:
  • component - The new component to insert.
  • componentToInsertBefore - The reference component before which the new component is inserted.

• InsertAfter(IComponent component, IComponent componentToInsertBefore)
  • Parameters:
  • component - The new component to insert.
  • componentToInsertBefore - The reference component after which the new component is inserted.

• Clear()
  • Clears all children from the Stack.

• Replace(IComponent newComponent, IComponent oldComponent)
  • Parameters:
  • newComponent - The component to insert in place of the old one.
  • oldComponent - The component to be replaced.

• Remove(IComponent component)
  • Parameters:
  • component - The child component to remove from the Stack.

• Render()
  • Returns: The underlying HTMLElement representing the Stack.

• Skeleton(bool enabled = true)
  • Parameters:
  • enabled (optional) - A boolean indicating whether to enable or disable the skeleton loading state.
  • Returns: The current Stack instance.

• StackOrientation
  • Type: Orientation (enum: Vertical, Horizontal, VerticalReverse, HorizontalReverse)
  • Gets or sets the current orientation of the Stack by adjusting the underlying flex-direction CSS style.

• CanWrap
  • Type: bool
  • Gets or sets whether the Stack’s children are allowed to wrap (i.e. flex-wrap).

• IsInline
  • Type: bool
  • Gets or sets whether the Stack is styled as an inline flex container.

• InnerElement
  • Type: HTMLElement
  • The underlying DOM element representing the Stack. (Read-only)

• Background
  • Type: string
  • Gets or sets the background style of the Stack.

• Margin
  • Type: string
  • Gets or sets the margin CSS value of the Stack.

• Padding
  • Type: string
  • Gets or sets the padding CSS value of the Stack.

• StylingContainer
  • Type: HTMLElement
  • Returns the container element used when applying special-case styling. (Read-only)

• PropagateToStackItemParent
  • Type: bool
  • Indicates whether style changes should propagate to child stack items. (Read-only)

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

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

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

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

• Grid
• HStack
• SortableStack

This documentation provides an overview of the Stack component’s functionality, methods, and properties, along with code samples to help you integrate it into your Tesserae UI application.