List 列表

通用列表。

何时使用

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

代码演示

简单列表

列表拥有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

可通过设置 header 和 footer，来自定义列表头部和尾部。

import React from 'react';
import ReactDOM from 'react-dom';
import { List } from 'choerodon-ui';
​
const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];
​
ReactDOM.render(
  <div>
    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
    <List
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      bordered
      dataSource={data}
      renderItem={item => <List.Item>{item}</List.Item>}
    />
    <h3 style={{ margin: '16px 0' }}>Small Size</h3>
    <List
      size="small"
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      bordered
      dataSource={data}
      renderItem={item => <List.Item>{item}</List.Item>}
    />
    <h3 style={{ margin: '16px 0' }}>Large Size</h3>
    <List
      size="large"
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      bordered
      dataSource={data}
      renderItem={item => <List.Item>{item}</List.Item>}
    />
  </div>,
  document.getElementById('container'),
);
​

基础列表

基础列表。

import React from 'react';
import ReactDOM from 'react-dom';
import { List, Avatar } from 'choerodon-ui';
​
const data = [
  {
    title: 'Choerodon UI Title 1',
  },
  {
    title: 'Choerodon UI Title 2',
  },
  {
    title: 'Choerodon UI Title 3',
  },
  {
    title: 'Choerodon UI Title 4',
  },
];
​
ReactDOM.render(
  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title={<a href="https://open-hand.github.io/choerodon-ui/">{item.title}</a>}
          description="Choerodon"
        />
      </List.Item>
    )}
  />,
  document.getElementById('container'),
);
​

加载更多

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { List, Avatar, Button, Spin } from 'choerodon-ui';
​
import reqwest from 'reqwest';
​
const fakeDataUrl =
  'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
​
class LoadMoreList extends React.Component {
  state = {
    loading: true,
    loadingMore: false,
    showLoadingMore: true,
    data: [],
  };
​
  componentDidMount() {
    this.getData((res) => {
      this.setState({
        loading: false,
        data: res.results,
      });
    });
  }
​
  getData = (callback) => {
    reqwest({
      url: fakeDataUrl,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: (res) => {
        callback(res);
      },
    });
  };
​
  onLoadMore = () => {
    this.setState({
      loadingMore: true,
    });
    this.getData((res) => {
      const data = this.state.data.concat(res.results);
      this.setState(
        {
          data,
          loadingMore: false,

竖排列表样式

通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。

import React from 'react';
import ReactDOM from 'react-dom';
import { List, Avatar, Icon } from 'choerodon-ui';
​
const listData = [];
for (let i = 0; i < 5; i += 1) {
  listData.push({
    href: 'https://open-hand.github.io/choerodon-ui/',
    title: `choerodon ui part ${i}`,
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Choerodon UI, An enterprise-class UI design language and React-based implementation.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}
​
const pagination = {
  pageSize: 10,
  current: 1,
  total: listData.length,
  onChange: () => {},
};
​
const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);
​
ReactDOM.render(
  <List
    itemLayout="vertical"
    size="large"
    pagination={pagination}
    dataSource={listData}
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <IconText key="star-o" type="star-o" text="156" />,
          <IconText key="like-o" type="like-o" text="156" />,
          <IconText key="message" type="message" text="2" />,
        ]}
        extra={
          <img
            width={272}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={item.avatar} />}
          title={<a href={item.href}>{item.title}</a>}
          description={item.description}
        />
        {item.content}
      </List.Item>
    )}
  />,
  document.getElementById('container'),
);
​

栅格列表

可以通过设置 List 的 grid 属性来实现栅格列表，column 可设置期望显示的列数。

import React from 'react';
import ReactDOM from 'react-dom';
import { List, Card } from 'choerodon-ui';
​
const data = [
  {
    title: 'Title 1',
  },
  {
    title: 'Title 2',
  },
  {
    title: 'Title 3',
  },
  {
    title: 'Title 4',
  },
];
​
ReactDOM.render(
  <List
    grid={{ gutter: 16, column: 4 }}
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <Card title={item.title}>Card content</Card>
      </List.Item>
    )}
  />,
  document.getElementById('container'));
​

响应式的栅格列表

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

import React from 'react';
import ReactDOM from 'react-dom';
import { List, Card } from 'choerodon-ui';
​
const data = [
  {
    title: 'Title 1',
  },
  {
    title: 'Title 2',
  },
  {
    title: 'Title 3',
  },
  {
    title: 'Title 4',
  },
  {
    title: 'Title 5',
  },
  {
    title: 'Title 6',
  },
];
​
ReactDOM.render(
  <List
    grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <Card title={item.title}>Card content</Card>
      </List.Item>
    )}
  />,
  document.getElementById('container'));
​

API

List

List grid props

List.Item

List.Item.Meta