Components / Sortable

Sortable

Drag-to-reorder over the Navius Sortable primitive: pointer drag plus APG grab-and-move keyboard (focus a handle, then arrow keys). The order is a list of stable keys you iterate to render one ZitsSortableItem per key. Drag a row by its handle below. This preview is the real component running in WebAssembly.

Examples

Draft the proposal

Review with the team

Ship the release

Celebrate

Order: a, b, c, d

razor

<ZitsSortable @bind-Values="_order">
    @foreach (var key in _order)
    {
        <ZitsSortableItem Value="@key" @key="key">
            <ZitsSortableItemHandle />
            <span class="flex-1">@_labels[key]</span>
        </ZitsSortableItem>
    }
</ZitsSortable>

@code { private IReadOnlyList<string> _order = new[] { "a", "b", "c" }; }

Anatomy

Bind the order, then iterate the same keys. Compose a ZitsSortableItemHandle inside an item to scope pointer drag to the handle.

razor

<ZitsSortable @bind-Values="_order">
    @foreach (var key in _order)
    {
        <ZitsSortableItem Value="@key" @key="key">
            <ZitsSortableItemHandle />
            <span class="flex-1">@_labels[key]</span>
        </ZitsSortableItem>
    }
</ZitsSortable>

@code { private IReadOnlyList<string> _order = new[] { "a", "b", "c" }; }

Installation

Terminal bash

navius add sortable

API reference

ZitsSortable (root):

Prop	Type	Default
Values	IReadOnlyList<string>?	null
ValuesChanged	EventCallback<IReadOnlyList<string>>	-
DefaultValues	IReadOnlyList<string>?	null
Orientation	SortableOrientation	Vertical
OnReorder	EventCallback<SortableReorderEventArgs>	-
Disabled	bool	false

Parts

Prop	Type	Default
ZitsSortableItem	row	Value (stable key, required), Label, Disabled
ZitsSortableItemHandle	slot	scopes pointer drag to a handle; overridable glyph