Tesserae - Sortable Stack

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.

sortable-stack-sample.cs

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

    public class SortableStackExample : IComponent
    {
        private static IComponent Row(string label) =>
            Card(HStack().AlignItemsCenter().WS().Children(
                Icon(UIcons.MenuBurger).Foreground(Theme.Secondary.Foreground).PR(8.px()),
                TextBlock(label)
            )).Compact().WS().MB(4.px());

        public HTMLElement Render()
        {
            var current = TextBlock("alpha, beta, gamma, delta, epsilon").SemiBold();
            var count   = TextBlock("0").SemiBold();
            var changes = 0;

            var sortable = VSortableStack().NoDefaultMargin().WS();
            sortable.Add("alpha",   Row("Alpha"));
            sortable.Add("beta",    Row("Beta"));
            sortable.Add("gamma",   Row("Gamma"));
            sortable.Add("delta",   Row("Delta"));
            sortable.Add("epsilon", Row("Epsilon"));

            sortable.OnSortingChanged(order =>
            {
                current.Text(string.Join(", ", order));
                count.Text((++changes).ToString());
            });

            return Stack().Padding(16.px()).W(312.px()).Children(
                TextBlock("Drag the cards to reorder them.").Small().Secondary().PB(8.px()),
                sortable,
                HStack().AlignItemsCenter().PT(12.px()).Children(Label("Order:").Inline().SetContent(current)),
                HStack().AlignItemsCenter().PT(4.px()).Children(Label("Reorders fired:").Inline().SetContent(count))
            ).Render();
        }
    }
}

SortableStackItem

Each draggable entry is represented by SortableStackItem.

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

API reference

class

SortableStack

public class SortableStack : IComponent, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling, ICanWrap

A Stack component that allows its children to be reordered via drag and drop.

Namespace: Tesserae
Implements: IComponent, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling, ICanWrap

Constructors

Name	Description
SortableStack	Initializes a new instance of the SortableStack class.

Constructor

SortableStack

public SortableStack(Stack.Orientation orientation = Stack.Orientation.Vertical)

Initializes a new instance of the SortableStack class.

Parameters

orientation: The orientation of the stack (vertical or horizontal).

Properties

Name	Description
Background	Gets or sets the background color.
Margin	Gets or sets the margin.
Padding	Gets or sets the padding.
StylingContainer	Gets the styling container.
PropagateToStackItemParent	Gets whether styling should propagate to the stack item parent.
CanWrap	Gets or sets whether the stack can wrap its items.

Property

SortableStack.Background

public string Background { get ; set ; }

Gets or sets the background color.

Property

SortableStack.Margin

public string Margin { get ; set ; }

Gets or sets the margin.

Property

SortableStack.Padding

public string Padding { get ; set ; }

Gets or sets the padding.

Property

SortableStack.StylingContainer

public dom.HTMLElement StylingContainer

Gets the styling container.

Property

SortableStack.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

Property

SortableStack.CanWrap

public bool CanWrap { get ; set ; }

Gets or sets whether the stack can wrap its items.

Methods

Name	Description
Add	Adds a component to the sortable stack.
Children	Sets the children of the sortable stack.
Render	Renders the sortable stack.
AlignItemsCenter	Aligns items in the center.
LoadSorting	Loads the sorting order of the items. Should be called after all items have been added.
OnSortingChanged	Adds a sorting change event handler.
NoWrap	Disables wrapping of items.
Wrap	Enables wrapping of items.
AlignItems	Sets the alignment of items.
Relative	Sets the stack to use relative positioning.
AlignContent	Sets the content alignment.
JustifyContent	Sets the content justification.
JustifyItems	Sets the item justification.
RemovePropagation	Removes event propagation.
OnMouseOver	Adds a mouse over event handler.
OnMouseOut	Adds a mouse out event handler.
Clear	Clears all items from the sortable stack.
NoDefaultMargin	Removes the default margin from the stack.
Remove	Removes an item from the sortable stack.

Method

SortableStack.Add

Overload
Add(string, IComponent)	Adds a component to the sortable stack.
Add(SortableStackItem)	Adds a SortableStackItem to the stack.

Add(string, IComponent)

public void Add(string identifier, IComponent component)

Adds a component to the sortable stack.

Parameters

identifier string: A unique identifier for the component.
component IComponent: The component to add.

Add(SortableStackItem)

public void Add(SortableStackItem item)

Adds a SortableStackItem to the stack.

Parameters

item SortableStackItem: The item to add.

Method

SortableStack.Children

public SortableStack Children(params SortableStackItem[] children)

Sets the children of the sortable stack.

Parameters

children: The children items.

Returns

The current instance of the type.

Method

SortableStack.Render

public dom.HTMLElement Render()

Renders the sortable stack.

Returns

The rendered HTMLElement.

Method

SortableStack.AlignItemsCenter

public SortableStack AlignItemsCenter()

Aligns items in the center.

Returns

The current instance of the type.

Method

SortableStack.LoadSorting

public void LoadSorting(string[] itemOrder)

Loads the sorting order of the items. Should be called after all items have been added.

Parameters

itemOrder: An array of identifiers in the desired order.

Method

SortableStack.OnSortingChanged

public void OnSortingChanged(Action<string[]> onSortingChanged)

Adds a sorting change event handler.

Parameters

onSortingChanged: The event handler action.

Method

SortableStack.NoWrap

public SortableStack NoWrap()

Disables wrapping of items.

Returns

The current instance of the type.

Method

SortableStack.Wrap

public SortableStack Wrap()

Enables wrapping of items.

Returns

The current instance of the type.

Method

SortableStack.AlignItems

public SortableStack AlignItems(ItemAlign align)

Sets the alignment of items.

Parameters

align: The alignment.

Returns

The current instance of the type.

Method

SortableStack.Relative

public SortableStack Relative()

Sets the stack to use relative positioning.

Returns

The current instance of the type.

Method

SortableStack.AlignContent

public SortableStack AlignContent(ItemAlign align)

Sets the content alignment.

Parameters

align: The alignment.

Returns

The current instance of the type.

Method

SortableStack.JustifyContent

public SortableStack JustifyContent(ItemJustify justify)

Sets the content justification.

Parameters

justify: The justification.

Returns

The current instance of the type.

Method

SortableStack.JustifyItems

public SortableStack JustifyItems(ItemJustify justify)

Sets the item justification.

Parameters

justify: The justification.

Returns

The current instance of the type.

Method

SortableStack.RemovePropagation

public SortableStack RemovePropagation()

Removes event propagation.

Returns

The current instance of the type.

Method

SortableStack.OnMouseOver

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

Adds a mouse over event handler.

Method

SortableStack.OnMouseOut

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

Adds a mouse out event handler.

Method

SortableStack.Clear

public void Clear()

Clears all items from the sortable stack.

Method

SortableStack.NoDefaultMargin

public SortableStack NoDefaultMargin()

Removes the default margin from the stack.

Returns

The current instance of the type.

Method

SortableStack.Remove

public void Remove(string identifer)

Removes an item from the sortable stack.

Parameters

identifer: The identifier of the item to remove.

class

SortableStackItem

public class SortableStackItem

Represents an item within a SortableStack.

Namespace: Tesserae

Properties

Name	Description
Component	Gets or sets the component.
Identifier	Gets or sets the unique identifier.

Property

SortableStackItem.Component

public IComponent Component { get; set; }

Gets or sets the component.

Property

SortableStackItem.Identifier

public string Identifier { get; set; }

Gets or sets the unique identifier.

SortableStack

Description

Usage

SortableStackItem

API reference

Constructors

SortableStack

Parameters

Properties

SortableStack.Background

SortableStack.Margin

SortableStack.Padding

SortableStack.StylingContainer

SortableStack.PropagateToStackItemParent

SortableStack.CanWrap

Methods

SortableStack.Add

Add(string, IComponent)

Parameters

Add(SortableStackItem)

Parameters

SortableStack.Children

Parameters

Returns

SortableStack.Render

Returns

SortableStack.AlignItemsCenter

Returns

SortableStack.LoadSorting

Parameters

SortableStack.OnSortingChanged

Parameters

SortableStack.NoWrap

Returns

SortableStack.Wrap

Returns

SortableStack.AlignItems

Parameters

Returns

SortableStack.Relative

Returns

SortableStack.AlignContent

Parameters

Returns

SortableStack.JustifyContent

Parameters

Returns

SortableStack.JustifyItems

Parameters

Returns

SortableStack.RemovePropagation

Returns

SortableStack.OnMouseOver

SortableStack.OnMouseOut

SortableStack.Clear

SortableStack.NoDefaultMargin

Returns

SortableStack.Remove

Parameters

Properties

SortableStackItem.Component

SortableStackItem.Identifier

See also