List #

The List component is used to display a group of data, suitable for presenting list-like content, and supports drag-and-drop sorting.

Import #

Examples #

Basic #

Size #

Border #

Hover #

Sortable #

index of List.Item is required.

Collection Sort #

Each collection is independent, index of List.Item is required. (be unique in the collection)

Fixed Item Sort #

Based on Collection Sort, the items in the list are fixed in position during sorting.

List with Custom Item #

No Divider #

Props #

<List> #

Property	Type (Default)	Description
autoScroll	boolean (true)	Enables automatic scrolling when the list overflows
bordered	boolean	Displays borders around the list items
divider	boolean	Displays a divider between the list items
hover	boolean	Enables hover animation on list items
onSort	(payload:Payload) => void	Callback triggered when sorting ends
onSortEnd	(payload:Payload) => void	Callback triggered after the sorting operation ends
onSortMove	(payload:Payload) => void	Callback triggered when an item is moved in the list
onSortStart	(payload:Payload) => void	Callback triggered at the start of sorting
pressDelay	number (0)	Delay before sorting is triggered after pressing
size	'lg' | 'md' | 'sm' | 'xs' (md)	Defines the size of the list items
sortable	boolean	Enables sorting functionality for the list items
transitionDuration	number (300)	Duration (in milliseconds) of the sort animation

<List.Item> #

Payload #

interface Payload {
  collection: number | string;
  node: HTMLElement;
  newIndex: number;
  oldIndex: number;
}