List
Used to display a set of data
Import
import { List } from 'rsuite';
// or
import List from 'rsuite/List';
Examples
Basic
Roses are red
Violets are blue
Sugar is sweet
And so are you
Size
Small
Roses are red
Violets are blue
Sugar is sweet
And so are you
Medium (Default)
Roses are red
Violets are blue
Sugar is sweet
And so are you
Large
Roses are red
Violets are blue
Sugar is sweet
And so are you
Border
Roses are red
Violets are blue
Sugar is sweet
And so are you
Hover
Roses are red
Violets are blue
Sugar is sweet
And so are you
Sortable
index
of List.Item is required. (be unique in the collection)
Roses are red
Violets are blue
Sugar is sweet
And so are you
Collection Sort
colection
has its own space,index
of List.Item is required. (be unique in the collection)
collection0 item0
collection0 item1
collection1 item0
collection1 item1
collection2 item0
collection2 item1
I'm last one.
Fixed Item Sort
based on
collection
, Item can fixed during sort order.
1
Chrome
2
Edge
3
FireFox
4
Safari
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 |
ts:Payload
interface Payload {
collection: number | string;
node: HTMLElement;
newIndex: number;
oldIndex: number;
}