List

Example
基础列表
图文列表
带 loading 的列表
自定义 loading
自定义空内容
API

列表组件，1.19.4+ 版本支持。

何时使用 #

最基础的列表展示，可承载文字、列表、图片、段落。

代码演示 #

基础列表 #

最简单的用法。

图文列表 #

图文列表展示。

import ReactDOM from 'react-dom';
import { List, Box, Button, Divider } from '@alifd/next';
const data = [
  {
    title: '\u6784\u5EFA\u4E00\u5957\u4EA7\u54C1\u5316\u8BBE\u8BA1\u7CFB\u7EDF',
    description:
      '\u968F\u7740\u4E92\u8054\u7F51\u884C\u4E1A\u7684\u805A\u53D8\u5F0F\u53D1\u5C55\uFF0C\u5728\u7535\u5546\u4E1A\u52A1\u4ECE\u201C\u4FE1\u606F\u900F\u51FA\u201D \u5230 \u201C\u5728\u7EBF\u4EA4\u6613\u201D \u7684\u8FC7\u7A0B\u4E2D\uFF0C\u7F51\u7AD9 UI \u6784\u5EFA\u4E5F\u7ECF\u5386\u4E86\u201C\u4F53\u9A8C\u4E00\u81F4\u6027\u201D\u3001\u201C\u8BBE\u8BA1\u6548\u7387\u201D\u3001\u201CUI\u7CFB\u7EDF\u6784\u5EFA/\u5E94\u7528\u6548\u7387\u201D\u3001\u201C\u591A\u7AEF\u9002\u914D\u201D \u2026',
    author: '\u8C22\u7476 3 \u5C0F\u65F6\u524D\u66F4\u65B0',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png',
  },
  {
    title: '\u6784\u5EFA\u4E00\u5957\u4EA7\u54C1\u5316\u8BBE\u8BA1\u7CFB\u7EDF',
    description:
      '\u968F\u7740\u4E92\u8054\u7F51\u884C\u4E1A\u7684\u805A\u53D8\u5F0F\u53D1\u5C55\uFF0C\u5728\u7535\u5546\u4E1A\u52A1\u4ECE\u201C\u4FE1\u606F\u900F\u51FA\u201D \u5230 \u201C\u5728\u7EBF\u4EA4\u6613\u201D \u7684\u8FC7\u7A0B\u4E2D\uFF0C\u7F51\u7AD9 UI \u6784\u5EFA\u4E5F\u7ECF\u5386\u4E86\u201C\u4F53\u9A8C\u4E00\u81F4\u6027\u201D\u3001\u201C\u8BBE\u8BA1\u6548\u7387\u201D\u3001\u201CUI\u7CFB\u7EDF\u6784\u5EFA/\u5E94\u7528\u6548\u7387\u201D\u3001\u201C\u591A\u7AEF\u9002\u914D\u201D \u2026',
    author: '\u8C22\u7476 3 \u5C0F\u65F6\u524D\u66F4\u65B0',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png',
  },
  {
    title: '\u6784\u5EFA\u4E00\u5957\u4EA7\u54C1\u5316\u8BBE\u8BA1\u7CFB\u7EDF',
    description:
      '\u968F\u7740\u4E92\u8054\u7F51\u884C\u4E1A\u7684\u805A\u53D8\u5F0F\u53D1\u5C55\uFF0C\u5728\u7535\u5546\u4E1A\u52A1\u4ECE\u201C\u4FE1\u606F\u900F\u51FA\u201D \u5230 \u201C\u5728\u7EBF\u4EA4\u6613\u201D \u7684\u8FC7\u7A0B\u4E2D\uFF0C\u7F51\u7AD9 UI \u6784\u5EFA\u4E5F\u7ECF\u5386\u4E86\u201C\u4F53\u9A8C\u4E00\u81F4\u6027\u201D\u3001\u201C\u8BBE\u8BA1\u6548\u7387\u201D\u3001\u201CUI\u7CFB\u7EDF\u6784\u5EFA/\u5E94\u7528\u6548\u7387\u201D\u3001\u201C\u591A\u7AEF\u9002\u914D\u201D \u2026',
    author: '\u8C22\u7476 3 \u5C0F\u65F6\u524D\u66F4\u65B0',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png',
  },
  {
    title: '\u6784\u5EFA\u4E00\u5957\u4EA7\u54C1\u5316\u8BBE\u8BA1\u7CFB\u7EDF',
    description:
      '\u968F\u7740\u4E92\u8054\u7F51\u884C\u4E1A\u7684\u805A\u53D8\u5F0F\u53D1\u5C55\uFF0C\u5728\u7535\u5546\u4E1A\u52A1\u4ECE\u201C\u4FE1\u606F\u900F\u51FA\u201D \u5230 \u201C\u5728\u7EBF\u4EA4\u6613\u201D \u7684\u8FC7\u7A0B\u4E2D\uFF0C\u7F51\u7AD9 UI \u6784\u5EFA\u4E5F\u7ECF\u5386\u4E86\u201C\u4F53\u9A8C\u4E00\u81F4\u6027\u201D\u3001\u201C\u8BBE\u8BA1\u6548\u7387\u201D\u3001\u201CUI\u7CFB\u7EDF\u6784\u5EFA/\u5E94\u7528\u6548\u7387\u201D\u3001\u201C\u591A\u7AEF\u9002\u914D\u201D \u2026',
    author: '\u8C22\u7476 3 \u5C0F\u65F6\u524D\u66F4\u65B0',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png',
  },
];
const actions = (
  <Box
    direction="row"
    align="center"
    style={{ whiteSpace: 'nowrap', height: '100%', paddingLeft: 100 }}
  >
    <Button text type="primary">
      {'\u7F16\u8F91'}
    </Button>
    <Divider direction="ver" />
    <Button text type="primary">
      {'\u8BA2\u9605'}
    </Button>
    <Divider direction="ver" />
    <Button text type="primary">
      {'\u5220\u9664'}
    </Button>
  </Box>
);
ReactDOM.render(
  <List
    dataSource={data}
    renderItem={(item, i) => (
      <List.Item
        key={i}
        extra={actions}
        media={<img width="161" height="108" src={item.img} />}
        title={item.title}
      >
        <p style={{ margin: '12px 0' }}>{item.description}</p>
        <div>{item.author}</div>
      </List.Item>
    )}
  />,
  mountNode
);

带 loading 的列表 #

带 loading 的列表展示。

import { useState } from 'react';
import ReactDOM from 'react-dom';
import { List, Avatar, Button } from '@alifd/next';
const data = [
  {
    title: 'A Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'B Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$10',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
];
const App = () => {
  const [loading, setLoading] = useState(false);
  return (
    <div style={{ width: 288 }}>
      <Button onClick={() => setLoading(!loading)}>Toggle loading</Button>
      <List
        size="small"
        loading={loading}
        header={<div>Notifications</div>}
        dataSource={data}
        renderItem={(item, i) => (
          <List.Item
            key={i}
            extra={item.money}
            title={item.title}
            media={<Avatar src={item.img} />}
          >
            {'List Item '}
            {i}
          </List.Item>
        )}
      />
    </div>
  );
};
ReactDOM.render(<App />, mountNode);

自定义 loading #

自定义 loading 样式。

import { useState } from 'react';
import ReactDOM from 'react-dom';
import { List, Avatar, Loading, Icon, Switch } from '@alifd/next';
const data = [
  {
    title: 'A Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'B Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$10',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
];
const indicator = (
  <div>
    <Icon type="loading" />
  </div>
);
const CustomLoading = props => <Loading indicator={indicator} {...props} />;
const App = () => {
  const [loading, setLoading] = useState(false);
  return (
    <div style={{ width: 288 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
        {'loading:'} <Switch style={{ marginLeft: 8 }} checked={loading} onChange={setLoading} />
      </div>
      <List
        size="small"
        loading={loading}
        loadingComponent={CustomLoading}
        header={<div>Notifications</div>}
        dataSource={data}
        renderItem={(item, i) => (
          <List.Item
            key={i}
            extra={item.money}
            title={item.title}
            media={<Avatar src={item.img} />}
          >
            {'List Item '}
            {i}
          </List.Item>
        )}
      />
    </div>
  );
};
ReactDOM.render(<App />, mountNode);

自定义空内容 #

自定义无数据时展示的内容。

API #

List #

参数	说明	类型	默认值	是否必填
header	列表头部	ReactNode	-
footer	列表尾部	ReactNode	-
size	列表尺寸	'medium' \| 'small'	'medium'
divider	是否显示分割线	boolean	true
children	children	ReactNode	-
dataSource	列表项数据源	DataItem[]	-
renderItem	当使用 dataSource 时，可以用 renderItem 自定义渲染列表项签名: 参数: current: 当前遍历的项 index: 当前遍历的项的索引返回值: - 自定义渲染的 ReactElement	(current: DataItem, index: number) => ReactElement	-
loading	loading 状态控制	boolean	false
loadingComponent	自定义 Loading 组件签名: 参数: props: 透传 props 返回值: - 自定义的 Loading 组件	(props: LoadingProps) => ReactElement	-
emptyContent	当列表为空时显示的内容	ReactNode	-

List.Item #

参数	说明	类型	默认值	是否必填
title	列表元素的标题	ReactNode	-
description	列表元素的描述内容	ReactNode	-
media	列表元素的头像 / 图标 / 图片内容	ReactNode	-
extra	额外内容	ReactNode	-