# Observable Stack

ObservableStack is a container component that manages the display of its child components using a flexbox-inspired layout and an efficient reconciliation process. It leverages an observable list of components (each implementing an identifier and content hash) to update only those parts of the DOM that have changed, improving performance in dynamic interfaces. This component is part of the Collections group and is ideal for scenarios where the UI state, such as scroll position, must be maintained with minimal re-rendering.

Create an ObservableStack by supplying an ObservableList of components that implement IComponentWithID. The component can be configured for different orientations (vertical, horizontal, etc.) and debounced updates if needed.

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

public class MyComponent : IComponentWithID
{
    public string Identifier => "component1";
    public string ContentHash => "hash_component1";

    public HTMLElement Render()
    {
        return Div("My Component").Render();
    }
}

public class ObservableStackExample
{
    public void Run()
    {
        // Create an observable list of components.
        var componentList = new ObservableList<IComponentWithID>();

        // Instantiate the ObservableStack with vertical orientation and debounce enabled.
        var observableStack = ObservableStack(componentList, Orientation.Vertical, debounce: true)
                                .AlignItemsCenter()
                                .JustifyContent(ItemJustify.Center)
                                .Padding("10px")
                                .Background("lightgray");

        // Populate the list with components.
        componentList.ReplaceAll(new IComponentWithID[]
        {
            new MyComponent(),
            new MyComponent()
        });

        // Render the ObservableStack and add it to the document body.
        var stackElement = observableStack.Render();
        document.body.appendChild(stackElement);
    }
}

• AlignItems(ItemAlign align): ObservableStack
  Sets the CSS align-items property for the stack.
  Parameters:
  • align: an enum value of ItemAlign (e.g., Center, Start, End).

• AlignItemsCenter(): ObservableStack
  Shortcut to set the align-items property to 'center'.

• Relative(): ObservableStack
  Adds a class to position the stack relatively.

• AlignContent(ItemAlign align): ObservableStack
  Sets the CSS align-content property.
  Parameters:
  • align: an enum value of ItemAlign.

• JustifyContent(ItemJustify justify): ObservableStack
  Sets the CSS justify-content property.
  Parameters:
  • justify: an enum value of ItemJustify (e.g., Center, SpaceBetween).

• JustifyItems(ItemJustify justify): ObservableStack
  Sets the CSS justify-items property.
  Parameters:
  • justify: an enum value of ItemJustify.

• RemovePropagation(): ObservableStack
  Disables propagation of styles to the parent stack item container.

• Clear(): void
  Clears all children from the stack.

• Horizontal(): ObservableStack
  Sets the stack orientation to horizontal.

• Vertical(): ObservableStack
  Sets the stack orientation to vertical.

• HorizontalReverse(): ObservableStack
  Sets the stack orientation to horizontal reverse.

• VerticalReverse(): ObservableStack
  Sets the stack orientation to vertical reverse.

• Wrap(): ObservableStack
  Enables wrapping of children elements within the stack.

• Inline(): ObservableStack
  Renders the stack as an inline-flex element.

• NoWrap(): ObservableStack
  Disables wrapping of children elements.

• OverflowHidden(): ObservableStack
  Hides overflow content by setting the CSS overflow property to hidden.

• NoDefaultMargin(): ObservableStack
  Removes the default margin from the stack’s container.

• OnMouseOver(ComponentEventHandler<ObservableStack, Event> onMouseOver): ObservableStack
  Registers a mouse-over event handler for the stack.
  Parameters:
  • onMouseOver: a delegate that handles the mouse over event.

• OnMouseOut(ComponentEventHandler<ObservableStack, Event> onMouseOut): ObservableStack
  Registers a mouse-out event handler for the stack.
  Parameters:
  • onMouseOut: a delegate that handles the mouse out event.

• Skeleton(bool enabled = true): IComponent
  Toggles a skeleton loading state.
  Parameters:
  • enabled: a boolean flag indicating whether to enable or disable the skeleton state.

• StackOrientation: Orientation
  Gets or sets the orientation of the stack based on the underlying flex direction (e.g., Vertical, Horizontal).

• CanWrap: bool
  Gets or sets whether the stack allows its children to wrap to the next line.

• IsInline: bool
  Gets or sets whether the stack should be displayed as inline-flex.

• InnerElement: HTMLElement
  Accesses the underlying HTML element representing the stack.

• Background: string
  Gets or sets the background styling of the stack.

• Margin: string
  Gets or sets the margin of the stack.

• Padding: string
  Gets or sets the padding of the stack.

• StylingContainer: HTMLElement
  Returns the HTMLElement that is used for applying special case styling.

• PropagateToStackItemParent: bool
  Indicates whether styling should propagate to the parent container of each stack item.

The following sample demonstrates how to set up an ObservableStack, attach it to an observable list of components, and render it.

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

public class MyComponent : IComponentWithID
{
    public string Identifier => "component1";
    public string ContentHash => "hash_component1";

    public HTMLElement Render()
    {
        return Div("My Component").Render();
    }
}

public class ObservableStackSample
{
    public void Run()
    {
        // Create an observable list to hold components.
        var componentList = new ObservableList<IComponentWithID>();

        // Create the ObservableStack with vertical orientation and debounce enabled.
        var obsStack = ObservableStack(componentList, Orientation.Vertical, debounce: true)
                        .AlignItemsCenter()
                        .JustifyContent(ItemJustify.Center)
                        .Padding("10px")
                        .Background("lightgray");

        // Populate the observable list with sample components.
        componentList.ReplaceAll(new IComponentWithID[]
        {
            new MyComponent(),
            new MyComponent()
        });

        // Render and append the ObservableStack to the document.
        HTMLElement stackElement = obsStack.Render();
        document.body.appendChild(stackElement);
    }
}

• Stack
• ObservableList