代码演示
如何引入
基本用法
列表的基本用法。可以通过 size 设置尺寸，支持
large, default, small。可设置 header 和 footer，来自定义列表头部和尾部。模板用法
列表的 List.Item 内置了简单的结构包含：header，main 和 extra 。其中 header 和 main 的对齐方式可以通过 align 属性设置，支持
flex-start（默认）, flex-end, center, baseline, 和 stretch 。布局
通过 layout 属性可以设置列表的布局，支持
vertical（默认）和horizontal。栅格列表
通过 grid 属性可以实现栅格列表，
span 可设置每项的占格数，gutter可设置栅格间隔。响应式的栅格列表
响应式的栅格列表。响应尺寸与 Grid 保持一致。
加载更多
可通过 loadMore 属性实现加载更多的功能。
滚动加载
可以通过集成 react-infinite-scroller 来实现滚动加载的列表。交互建议符合 semi 交互设计规范，这里采用三次滚加载后出现 load more 按钮的形式。
滚动加载无限长列表
可以通过集成 react-virtualized 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。
拖拽排序
可以通过集成 react-dnd 来实现拖拽排序。
如果你使用 react-sortable-hoc，这里也有一个例子
带分页器
你可以组合使用 Pagination， 实现一个分页的 List
带筛选器
你可以通过组装 Input 使用，实现对 List 列表的筛选
添加删除项
单选或多选
你可以通过组合使用 Radio 或 Checkbox 将 List 增强为一个列表选择器
响应键盘事件
你可以自行监听对应按键的键盘事件，实现不同 Item 的选择。如下面这个例子，可以使用上下方向键选择不同Item
以上书单例子的Demo中涉及到的自定义样式如下
API 参考
List
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bordered | 是否显示边框 | boolean | false |
| className | 自定义样式类名 | string | - |
| dataSource | 列表数据源 | any[] | - |
| emptyContent | 空列表的展示内容 | ReactNode | - |
| footer | 列表底部 | ReactNode | - |
| grid | 列表栅格配置 | Grid | - |
| header | 列表头部 | ReactNode | - |
| layout | 列表布局，支持vertical, horizontal | string | vertical |
| loadMore | 加载更多的按钮 | ReactNode | - |
| loading | 是否处于加载中，为true时会显示 spin | boolean | false |
| renderItem | 当使用 dataSource 时，可以用 renderItem 自定义渲染列表项 | (item, ind) => ReactNode | - |
| size | 列表尺寸，支持 small, default, large | string | default |
| split | 是否展示分割线 | boolean | true |
| style | 自定义样式对象 | CSSProperties | - |
| onClick | 点击回调事件 v>=1.0.0 | (e: event) => void | - |
| onRightClick | 右键点击回调事件 v>=1.0.0 | (e: event) => void | - |
List grid props
v>=1.7.0 其他 grid 参数，请参考 Grid
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 栅格占位格数 | number | - |
| gutter | 栅格间隔 | number | 0 |
| xs | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| sm | ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| md | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| lg | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xl | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xxl | ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
List.Item
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | 列表项头内容和主体内容的垂直对齐方式，支持 flex-start, flex-end, center, baseline, stretch | string | flex-start |
| className | 自定义样式类名 | string | - |
| extra | 列表项附加内容 | ReactNode | - |
| header | 列表项头内容 | ReactNode | - |
| main | 列表项主体内容 | ReactNode | - |
| style | 自定义样式对象 | CSSProperties | - |
| onClick | 点击回调事件 v>=1.0.0 | (e: event) => void | - |
| onRightClick | 右键点击回调事件 v>=1.0.0 | (e: event) => void | - |
