展示类 · List
列表
基础列表组件

代码演示

如何引入

基本用法

列表的基本用法。可以通过 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是否显示边框booleanfalse
className自定义样式类名string-
dataSource列表数据源any[]-
emptyContent空列表的展示内容ReactNode-
footer列表底部ReactNode-
grid列表栅格配置Grid-
header列表头部ReactNode-
layout列表布局,支持vertical, horizontalstringvertical
loadMore加载更多的按钮ReactNode-
loading是否处于加载中,为true时会显示 spinbooleanfalse
renderItem当使用 dataSource 时,可以用 renderItem 自定义渲染列表项(item, ind) => ReactNode-
size列表尺寸,支持 small, default, largestringdefault
split是否展示分割线booleantrue
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栅格间隔number0
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, stretchstringflex-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-

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED