代码演示

如何引入

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

基本用法

列表的基本用法。可以通过 size 设置尺寸，支持large, default, small。可设置 header 和 footer，来自定义列表头部和尾部。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

47

 

1

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

2

​

3

export default ()=>{

4

  const data = [

5

    '从明天起，做一个幸福的人',

6

    '喂马，劈柴，周游世界',

7

    '从明天起，关心粮食和蔬菜',

8

    '我有一所房子，面朝大海，春暖花开',

9

  ];

10

​

11

  return (

12

    <div>

13

      <div style={{ marginRight: '16px' }}>

14

        <h3 style={{ marginBottom: '16px' }}>Default Size</h3>

15

        <List

16

          header={<div>Header</div>}

17

          footer={<div>Footer</div>}

18

          bordered

19

          dataSource={data}

20

          renderItem={item => <List.Item>{item}</List.Item>}

21

        />

22

      </div>

23

      <div style={{ marginRight: '16px' }}>

24

        <h3 style={{ margin: '16px 0' }}>Small Size</h3>

25

        <List

26

          size="small"

27

          header={<div>Header</div>}

28

          footer={<div>Footer</div>}

Show Error

Auto Save

模板用法

列表的 List.Item 内置了简单的结构包含：header，main 和 extra 。其中 header 和 main 的对齐方式可以通过 align 属性设置，支持 flex-start（默认）, flex-end, center, baseline, 和 stretch 。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

58

 

1

import { List, Avatar, ButtonGroup, Button } from '@kousum/semi-ui-vue';

2

​

3

​

4

export default ()=>{

5

​

6

  const data = [

7

    // eslint-disable-next-line react/jsx-key

8

    <p

9

      style={{

10

        color: 'var(--semi-color-text-2)',

11

        margin: '4px 0',

12

        width: '420px',

13

        whiteSpace: 'nowrap',

14

        overflow: 'hidden',

15

        textOverflow: 'ellipsis',

16

      }}

17

    >

18

      Semi Design 是由抖音前端团队与 UED

19

      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的

20

      Web 应用。

21

    </p>,

22

    // eslint-disable-next-line react/jsx-key

23

    <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0', width: '500px' }}>

24

      Semi Design 是由抖音前端团队与 UED

25

      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的

26

      Web 应用。

27

    </p>,

28

    // eslint-disable-next-line react/jsx-key

Show Error

Auto Save

布局

通过 layout 属性可以设置列表的布局，支持vertical（默认）和horizontal。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

44

 

1

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

2

​

3

​

4

export default ()=>{

5

​

6

  const data = [

7

    {

8

      title: 'Semi Design Title 1',

9

      color: 'light-blue',

10

    },

11

    {

12

      title: 'Semi Design Title 2',

13

      color: 'grey',

14

    },

15

    {

16

      title: 'Semi Design Title 3',

17

      color: 'light-green',

18

    },

19

  ];

20

​

21

  return (

22

    <div style={{ padding: '12px', border: '1px solid var(--semi-color-border)', margin: '12px' }}>

23

      <List

24

        dataSource={data}

25

        layout="horizontal"

26

        renderItem={item => (

27

          <List.Item

28

            header={<Avatar color={item.color}>SE</Avatar>}

Show Error

Auto Save

栅格列表

通过 grid 属性可以实现栅格列表，span 可设置每项的占格数，gutter可设置栅格间隔。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

68

 

1

import { List, Descriptions, ButtonGroup, Rating, Button } from '@kousum/semi-ui-vue';

2

​

3

​

4

export default ()=>{

5

​

6

  const data = [

7

    {

8

      title: '审核管理平台',

9

      rating: 4.5,

10

      feedbacks: 124,

11

    },

12

    {

13

      title: '扁鹊',

14

      rating: 4,

15

      feedbacks: 108,

16

    },

17

    {

18

      title: '直播审核平台',

19

      rating: 4.5,

20

      feedbacks: 244,

21

    },

22

    {

23

      title: '抖音安全测试',

24

      feedbacks: 189,

25

    },

26

  ];

27

​

28

  const style = {

Show Error

Auto Save

响应式的栅格列表

响应式的栅格列表。响应尺寸与 Grid 保持一致。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

84

 

1

import { List, Descriptions, Rating, Button, ButtonGroup } from '@kousum/semi-ui-vue';

2

​

3

​

4

export default ()=>{

5

​

6

  const data = [

7

    {

8

      title: '审核管理平台',

9

      rating: 4.5,

10

      feedbacks: 124,

11

    },

12

    {

13

      title: '扁鹊',

14

      rating: 4,

15

      feedbacks: 108,

16

    },

17

    {

18

      title: '直播审核平台',

19

      rating: 3.5,

20

      feedbacks: 244,

21

    },

22

    {

23

      title: '抖音安全测试',

24

      feedbacks: 189,

25

    },

26

    {

27

      title: '内容平台',

28

      rating: 3,

Show Error

Auto Save

加载更多

可通过 loadMore 属性实现加载更多的功能。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

116

 

1

import { List, Skeleton, Button, Avatar } from '@kousum/semi-ui-vue';

2

import { defineComponent, onMounted, reactive } from 'vue';

3

​

4

​

5

const LoadMoreList = defineComponent(() => {

6

​

7

​

8

  let count2 = 3;

9

  let data = [];

10

  for (let i = 0; i < 40; i++) {

11

    data.push({

12

      color: 'grey',

13

      title: `Semi Design Title ${i}`,

14

      loading: false,

15

    });

16

  }

17

​

18

  const state = reactive({

19

    loading: false,

20

    dataSource: [],

21

    list: [],

22

    noMore: false,

23

  });

24

​

25

  let count = 0;

26

​

27

  const fetchData = () => {

28

    let placeholders = [0, 1, 2].map(key => ({ loading: true }));

Show Error

Auto Save

滚动加载

可以通过集成 react-infinite-scroller 来实现滚动加载的列表。交互建议符合 semi 交互设计规范，这里采用三次滚加载后出现 load more 按钮的形式。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

113

 

1

import { List, Button, Avatar, Spin } from '@kousum/semi-ui-vue';

2

import InfiniteScroll from 'react-infinite-scroller';

3

​

4

class ScrollLoad extends React.Component {

5

    constructor() {

6

        super();

7

​

8

        const count = 5;

9

        const dataList = [];

10

        for (let i = 0; i < 100; i++) {

11

            dataList.push({

12

                color: 'grey',

13

                title: `Semi Design Title ${i}`,

14

                loading: false,

15

            });

16

        }

17

        this.data = dataList;

18

        this.count = 0;

19

​

20

        this.fetchData = () => {

21

            this.setState({

22

                loading: true,

23

            });

24

            return new Promise((res, rej) => {

25

                setTimeout(() => {

26

                    let dataSource = this.data.slice(this.count * count, this.count * count + count);

27

                    res(dataSource);

28

                }, 1000);

Show Error

Auto Save

滚动加载无限长列表

可以通过集成 react-virtualized 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

132

 

1

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

2

import { InfiniteLoader, AutoSizer } from 'react-virtualized';

3

import VList from 'react-virtualized/dist/commonjs/List';

4

​

5

class VirtualizedScroll extends React.Component {

6

    constructor() {

7

        super();

8

​

9

        const dataList = [];

10

        for (let i = 0; i < 50; i++) {

11

            dataList.push({

12

                color: 'grey',

13

                title: `Semi Design Title ${i}`,

14

            });

15

        }

16

        this.data = dataList;

17

​

18

        this.fetchData = (startIndex, stopIndex) => {

19

            return new Promise((res, rej) => {

20

                setTimeout(() => {

21

                    let dataSource = this.data.slice(startIndex, stopIndex + 1);

22

                    res(dataSource);

23

                }, 1000);

24

            }).then(dataSource => {

25

                let newData = [...this.state.dataSource, ...dataSource];

26

                const { loadedRowsMap, loadingRowCount } = this.state;

27

                const increment = stopIndex - startIndex + 1;

28

                for (let i = startIndex; i <= stopIndex; i++) {

Show Error

Auto Save

拖拽排序

可以通过集成 react-dnd 来实现拖拽排序。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

155

 

1

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

2

import { DndProvider, DragSource, DropTarget } from 'react-dnd';

3

import HTML5Backend from 'react-dnd-html5-backend';

4

import ReactDOM from 'react-dom';

5

​

6

class DraggableItem extends React.Component {

7

    render() {

8

        const { component, draggingItem, index, connectDragSource, connectDropTarget } = this.props;

9

        const opacity = draggingItem && draggingItem.index === index ? 0.3 : 1;

10

        const style = {

11

            border: '1px solid var(--semi-color-border)',

12

            marginBottom: 12,

13

            backgroundColor: 'var(--semi-color-bg-2)',

14

            cursor: 'move',

15

        };

16

​

17

        return connectDragSource(

18

            connectDropTarget(

19

                <div ref={node => (this.node = node)} style={{ ...style, opacity }}>

20

                    {component}

21

                </div>

22

            )

23

        );

24

    }

25

}

26

​

27

const cardSource = {

Show Error

Auto Save

带分页器

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

46

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const data = [

6

    '围城',

7

    '平凡的世界（全三册）',

8

    '三体（全集）',

9

    '雪中悍刀行（全集）',

10

    '撒哈拉的故事',

11

    '明朝那些事',

12

    '一禅小和尚',

13

    '沙丘',

14

    '被讨厌的勇气',

15

    '罪与罚',

16

    '月亮与六便士',

17

    '沉默的大多数',

18

  ];

19

​

20

  const page = ref(1);

21

​

22

  let pageSize = 4;

23

​

24

  const getData = (page_) => {

25

    let start = (page_ - 1) * pageSize;

26

    let end = page_ * pageSize;

27

    return data.slice(start, end);

28

  };

Show Error

Auto Save

带筛选器

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

56

 

1

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

2

import { IconSearch } from '@kousum/semi-icons-vue';

3

import { defineComponent, ref } from 'vue';

4

​

5

const Demo = defineComponent(() => {

6

  const data = [

7

    '围城',

8

    '平凡的世界（全三册）',

9

    '三体（全集）',

10

    '雪中悍刀行（全集）',

11

    '撒哈拉的故事',

12

    '明朝那些事',

13

    '一禅小和尚',

14

    '沙丘',

15

    '被讨厌的勇气',

16

    '罪与罚',

17

  ];

18

​

19

  const list = ref(data);

20

​

21

  const onSearch = (string) => {

22

    let newList;

23

    if (string) {

24

      newList = data.filter(item => item.includes(string));

25

    } else {

26

      newList = data;

27

    }

28

    list.value = (newList);

Show Error

Auto Save

添加删除项

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

67

 

1

import { List, Input, Button } from '@kousum/semi-ui-vue';

2

import { IconMinusCircle, IconPlusCircle } from '@kousum/semi-icons-vue';

3

import { defineComponent, ref } from 'vue';

4

​

5

const Demo = defineComponent(() => {

6

  const data = [

7

    '围城',

8

    '平凡的世界（全三册）',

9

    '三体（全集）',

10

    '雪中悍刀行（全集）',

11

    '撒哈拉的故事',

12

    '明朝那些事',

13

    '一禅小和尚',

14

    '沙丘',

15

    '被讨厌的勇气',

16

    '罪与罚',

17

    '月亮与六便士',

18

    '沉默的大多数',

19

    '第一人称单数',

20

  ];

21

​

22

  const list = ref(data.slice(0, 8));

23

​

24

  const updateList = (item) => {

25

    let newList;

26

    if (item) {

27

      newList = list.value.filter(i => item !== i);

28

    } else {

Show Error

Auto Save

单选或多选

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

62

 

1

import { List, Input, Button, Checkbox, Radio, RadioGroup, CheckboxGroup } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const data = [

6

    '围城',

7

    '平凡的世界（全三册）',

8

    '三体（全集）',

9

    '雪中悍刀行（全集）',

10

    '撒哈拉的故事',

11

    '明朝那些事',

12

    '一禅小和尚',

13

    '沙丘',

14

    '被讨厌的勇气',

15

    '罪与罚',

16

    '月亮与六便士',

17

    '沉默的大多数',

18

    '第一人称单数',

19

  ];

20

​

21

  const page = ref(1);

22

  const checkboxVal = ref([...data[0]]);

23

  const radioVal = ref(data[0]);

24

​

25

  let pageSize = 8;

26

​

27

  const getData = (page) => {

Show Error

Auto Save

响应键盘事件

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

85

 

1

import { List, Input, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, onMounted, onUnmounted, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const data = [

6

    '围城',

7

    '平凡的世界（全三册）',

8

    '三体（全集）',

9

    '雪中悍刀行（全集）',

10

    '撒哈拉的故事',

11

    '明朝那些事',

12

    '一禅小和尚',

13

    '沙丘',

14

    '被讨厌的勇气',

15

    '罪与罚',

16

    '月亮与六便士',

17

    '沉默的大多数',

18

    '第一人称单数',

19

  ];

20

​

21

  const list = ref(data.slice(0, 10));

22

  const hoverIndex = ref(-1);

23

  const i = ref(-1);

24

​

25

  let changeIndex = (offset) => {

26

    let currentIndex = i.value;

27

    let index = currentIndex + offset;

28

    if (index < 0) {

Show Error

Auto Save

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

.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	是否显示边框	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	-

文案规范

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

设计变量

color

spacing

变量	默认值	用法
$color-list_default-border-default	var(--semi-color-border)	列表描边颜色
$color-list_empty-text-default	var(--semi-color-text-2)	空状态下列表文字颜色

显示第 1 条-第 2 条，共 2 条

• 1

变量	默认值	用法
$spacing-list_empty-paddingX	0px	空状态列表水平内边距
$spacing-list_empty-paddingY	$spacing-base-tight	空状态列表垂直内边距
$spacing-list_footer-paddingX	$spacing-base-tight	列表 footer 水平内边距
$spacing-list_footer-paddingY	$spacing-loose	列表 footer 垂直内边距
$spacing-list_item-paddingX	$spacing-base-tight	列表 item 水平内边距 - 默认尺寸
$spacing-list_item-paddingY	$spacing-loose	列表 item 垂直内边距 - 默认尺寸
$spacing-list_small-paddingX	$spacing-tight	列表 item 水平内边距 - 小尺寸
$spacing-list_small-paddingY	$spacing-base	列表 item 垂直内边距 - 小尺寸
$spacing-list_large-paddingX	$spacing-base	列表 item 水平内边距 - 大尺寸
$spacing-list_large-paddingY	$spacing-loose	列表 item 垂直内边距 - 大尺寸

显示第 1 条-第 10 条，共 14 条

• 1
• 2