SortableStack

Description

SortableStack is a stack-based container whose child items can be reordered with drag and drop. It wraps a standard Stack internally, tracks a stable identifier for each item, and reports the updated ordering when the user finishes sorting.

Use it when the visual order matters and you need to persist or react to that order, such as dashboards, pinned lists, or configurable layouts.

Usage

Create a SortableStack through the SortableStack(...), VSortableStack(), or HSortableStack() helpers. Add items with stable identifiers, then listen for sorting changes.

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

    public class SortableStackExample : IComponent
    {
        public HTMLElement Render()
        {
            var result = TextBlock("Drag the cards to change their order.");

            var sortable = VSortableStack()
                .AlignItemsCenter()
                .NoDefaultMargin();

            sortable.Add("alpha", Button("Alpha"));
            sortable.Add("beta", Button("Beta"));
            sortable.Add("gamma", Button("Gamma"));

            sortable.OnSortingChanged(order =>
                result.Text("Current order: " + string.Join(", ", order)));

            return Stack().Children(result, sortable).Render();
        }
    }
}

Methods

• Add(string identifier, IComponent component) adds a component with a stable identifier.
• Add(SortableStackItem item) adds a prebuilt sortable item.
• Children(params SortableStackItem[] children) replaces the current children with a new ordered set.
• LoadSorting(string[] itemOrder) applies a saved identifier order after items have been added.
• OnSortingChanged(Action<string[]> onSortingChanged) registers a callback for completed reorder operations.
• AlignItems(...), AlignItemsCenter(), AlignContent(...), JustifyContent(...), and JustifyItems(...) forward layout settings to the inner stack.
• Wrap(), NoWrap(), Relative(), RemovePropagation(), and NoDefaultMargin() configure layout behavior.
• Clear() removes all items.
• Remove(string identifier) removes a single item by identifier.
• Render() returns the underlying HTML element.

Properties

• Background gets or sets the stack background.
• Margin gets or sets the stack margin.
• Padding gets or sets the stack padding.
• CanWrap controls whether items may wrap.
• StylingContainer exposes the element used for special styling.
• PropagateToStackItemParent indicates whether styling should propagate to parent stack items.

SortableStackItem

Each draggable entry is represented by SortableStackItem.

• Identifier is the unique key used for ordering.
• Component is the rendered child component.

See also

• Stack
• ObservableStack
• Grid