List 列表

List 组件用于展示一组数据,适用于展示类似于列表的内容. 并且支持拖拽排序功能

获取组件

import { List } from 'rsuite';

演示

默认

列表尺寸

边框

悬停效果

可排序

必须给 List.Item 传入 index (组内唯一)

分组排序

每个 collection 的位置独立, 必须给 List.Item 传入 index (组内唯一)

固定项

基于分组排序,列表中的项在排序时固定位置

带自定义项的列表

没有分割线

Props

<List>

属性名称 类型 (默认值) 描述
autoScroll boolean (true) 溢出表格自动滚动
bordered boolean 是否需要边框
divider boolean 是否显示分割线
hover boolean 是否有鼠标悬停效果
onSort (payload: Payload) => void 排序结束回调
onSortEnd (payload: Payload) => void 排序结束回调
onSortMove (payload: Payload) => void 排序移动元素时的回调
onSortStart (payload: Payload) => void 排序开始回调
pressDelay number (0) 排序触发延迟
size 'lg' | 'md' | 'sm' | 'xs' (md) 列表大小
sortable boolean 是否可以排序
transitionDuration number (300) 排序动画持续时间

<List.Item>

属性名称 类型 (默认值) 描述
collection number | string (0) 元素组号
disabled boolean 禁止直接改变该元素的排序
index * number 元素索引(同组内必须唯一),排序时必选
size 'lg' | 'md' | 'sm' | 'xs' (md) 当前项大小

Payload

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