List
Used to display a set of data
Import
import { List } from 'rsuite';
Examples
Basic
Size
Border
Hover
Sortable
index
of List.Item is required. (be unique in the collection)
Collection Sort
colection
has its own space,index
of List.Item is required. (be unique in the collection)
Fixed Item Sort
based on
collection
, Item can fixed during sort order.
Custom
Props
<List>
Property | Type (Default) |
Description |
---|---|---|
autoScroll | boolean (true) |
auto scroll when overflow |
bordered | boolean | bordered |
hover | boolean | hover animation |
onSort | (payload:Payload) => void | callback of end of sorting |
onSortEnd | (payload:Payload) => void | callback of end of sorting |
onSortMove | (payload:Payload) => void | callback of moving over a list items |
onSortStart | (payload:Payload) => void | callback of beginning of sorting |
pressDelay | number (0) |
delay before trigger sort |
size | 'lg' | 'md' | 'sm' (md) |
list items size |
sortable | boolean | can change list item order |
transitionDuration | number (300) |
duration of sort animation |
<List.Item>
Property | Type (Default) |
Description |
---|---|---|
collection | number | string (0) |
collection of list item |
disabled | boolean | not allowed to move this item |
index * | number(required when sortable) | index of item(must be unique in the collection) |
size | 'lg' | 'md' | 'sm' (md) |
current item size |
Payload
interface Payload {
collection: number | string;
node: HTMLElement;
newIndex: number;
oldIndex: number;
}