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;
}