代码演示 ​

如何引入 ​

jsx
import { List } from '@kousum/semi-ui-vue';

基本用法 ​

列表的基本用法。可以通过 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 来实现拖拽排序。

带分页器 ​

你可以组合使用 Pagination， 实现一个分页的 List

带筛选器 ​

你可以通过组装 Input 使用，实现对 List 列表的筛选

添加删除项 ​

单选或多选 ​

你可以通过组合使用 Radio 或 Checkbox 将 List 增强为一个列表选择器

响应键盘事件 ​

你可以自行监听对应按键的键盘事件，实现不同 Item 的选择。如下面这个例子，可以使用上下方向键选择不同Item

以上书单例子的Demo中涉及到的自定义样式如下

scss
.component-list-demo-booklist {
    .list-item {
        &:hover {
            background-color: var(--semi-color-fill-0);
        }
        &:active {
            background-color: var(--semi-color-fill-1);
        }
    }
}


body > .component-list-demo-drag-item {
    font-size: 14px;
}

.component-list-demo-booklist-active-item {
    background-color: var(--semi-color-fill-0);
}

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-

文案规范 ​

  • 首字母大写
  • 结尾不跟随标点符号
  • 语法平行：如主动态与被动态、陈述句与祈使句混合使用

设计变量 ​