Sortable

Sortable list for lit-material: reorder items by pointer, touch or keyboard, within a list or between lists, with screen reader announcements.

3.4 KB gzipped
@lit-material/sortable 0.2.2
Renders on the server

Example

Install

npm install @lit-material/sortable @lit-material/tokens

import "@lit-material/sortable";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-sortable>`

Lets people reorder a list: by dragging a handle with a mouse, pen or finger, or from the keyboard — focus a handle, Space (or Enter) picks the item up, ↑/↓ move it, Space drops it and Escape puts it back. Each step is announced to screen readers.

Properties

Property	Attribute	Type	Default	Description
`group`	`group`	`string`	`""`	Lists with the same group accept each other's items. Empty: this list only.
`label`	`label`	`string`	`""`	Names the list in announcements, e.g. "Requests".
`disabled`	`disabled`	`boolean`	`false`
`layout`	`layout`	`SortLayout`	`"list"`	`list`: one item per row. `grid`: items in rows (a card grid, wrapping chips, one horizontal row).
`announcement`	property only	`string`	`""`	The last announcement, also read by tests.
`items`	property only	`HTMLElement[]`	none	The items, in order.

Events

Event	Description
`sort`	When an item is dropped somewhere new; `detail` is `SortDetail`.

Slots

Slot	Description
default	The items.

CSS custom properties

Property	Description
`--lit-material-sortable-indicator-color`	The drop line (default `--md-sys-color-primary`).

Source on GitHub npm