• List 列表

    通用列表。

    何时使用

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

    代码演示

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

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

    可通过设置 headerfooter,来自定义列表头部和尾部。

    expand code expand code
    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>,
      mountNode);
    
    基础列表。
    expand code expand code
    import { List, Avatar } from 'choerodon-ui';
    
    const data = [
      {
        title: 'Title 1',
      },
      {
        title: 'Title 2',
      },
      {
        title: 'Title 3',
      },
      {
        title: '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://github.com/choerodon">{item.title}</a>}
              description="Choerodon猪齿鱼是一个开源企业服务平台,是基于Kubernetes的容器编排和管理能力,整合DevOps工具链、微服务和移动应用框架,来帮助企业实现敏捷化的应用交付和自动化的运营管理,并提供IoT、支付、数据、智能洞察、企业应用市场等业务组件,来帮助企业聚焦于业务,加速数字化转型。"
            />
          </List.Item>
        )}
      />,
      mountNode);
    
    可通过 loadMore 属性实现加载更多功能。
    expand code expand code
    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,
          }, () => {
            window.dispatchEvent(new Event('resize'));
          });
        });
      }
    
      render() {
        const { loading, loadingMore, showLoadingMore, data } = this.state;
        const loadMore = showLoadingMore ? (
          <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
            {loadingMore && <Spin />}
            {!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>}
          </div>
        ) : null;
        return (
          <List
            className="demo-loadmore-list"
            loading={loading}
            itemLayout="horizontal"
            loadMore={loadMore}
            dataSource={data}
            renderItem={item => (
              <List.Item actions={[<a>edit</a>, <a>more</a>]}>
                <List.Item.Meta
                  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  title={<a href="https://github.com/choerodon">{item.name.last}</a>}
                  description="Choerodon猪齿鱼是一个开源企业服务平台,是基于Kubernetes的容器编排和管理能力,整合DevOps工具链、微服务和移动应用框架,来帮助企业实现敏捷化的应用交付和自动化的运营管理,并提供IoT、支付、数据、智能洞察、企业应用市场等业务组件,来帮助企业聚焦于业务,加速数字化转型。"
                />
                <div>content</div>
              </List.Item>
            )}
          />
        );
      }
    }
    
    ReactDOM.render(<LoadMoreList />, mountNode);
    
    通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。
    expand code expand code
    import { List, Avatar, Icon } from 'choerodon-ui';
    
    const listData = [];
    for (let i = 0; i < 5; i++) {
      listData.push({
        href: 'https://github.com/choerodon',
        title: `Choerodon part ${i}`,
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        description: 'Choerodon猪齿鱼是一个开源企业服务平台,是基于Kubernetes的容器编排和管理能力,整合DevOps工具链、微服务和移动应用框架,来帮助企业实现敏捷化的应用交付和自动化的运营管理,并提供IoT、支付、数据、智能洞察、企业应用市场等业务组件,来帮助企业聚焦于业务,加速数字化转型。',
      });
    }
    
    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 type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText 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>
        )}
      />,
      mountNode);
    
    可以通过设置 Listgrid 属性来实现栅格列表,column 可设置期望显示的列数。
    expand code expand code
    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>
        )}
      />,
      mountNode);
    
    响应式的栅格列表。尺寸与 Layout Grid 保持一致。
    expand code expand code
    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>
        )}
      />,
      mountNode);
    
    结合 react-infinite-scroller 实现滚动自动加载列表。
    expand code expand code
    import { List, message, Avatar, Spin } from 'choerodon-ui';
    import reqwest from 'reqwest';
    
    import InfiniteScroll from 'react-infinite-scroller';
    
    const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
    
    class InfiniteListExample extends React.Component {
      state = {
        data: [],
        loading: false,
        hasMore: true,
      }
    
      getData = (callback) => {
        reqwest({
          url: fakeDataUrl,
          type: 'json',
          method: 'get',
          contentType: 'application/json',
          success: (res) => {
            callback(res);
          },
        });
      }
    
      componentWillMount() {
        this.getData((res) => {
          this.setState({
            data: res.results,
          });
        });
      }
    
      handleInfiniteOnLoad = () => {
        let data = this.state.data;
        this.setState({
          loading: true,
        });
        if (data.length > 14) {
          message.warning('Infinite List loaded all');
          this.setState({
            hasMore: false,
            loading: false,
          });
          return;
        }
        this.getData((res) => {
          data = data.concat(res.results);
          this.setState({
            data,
            loading: false,
          });
        });
      }
    
      render() {
        return (
          <div className="demo-infinite-container">
            <InfiniteScroll
              initialLoad={false}
              pageStart={0}
              loadMore={this.handleInfiniteOnLoad}
              hasMore={!this.state.loading && this.state.hasMore}
              useWindow={false}
            >
              <List
                dataSource={this.state.data}
                renderItem={item => (
                  <List.Item key={item.id}>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<a href="https://github.com/choerodon">{item.name.last}</a>}
                      description={item.email}
                    />
                    <div>Content</div>
                  </List.Item>
                )}
              >
                {this.state.loading && this.state.hasMore && <Spin className="demo-loading" />}
              </List>
            </InfiniteScroll>
          </div>
        );
      }
    }
    
    ReactDOM.render(<InfiniteListExample />, mountNode);
    

    API

    List

    参数说明类型默认值
    bordered是否展示边框booleanfalse
    footer列表底部string|ReactNode-
    grid列表栅格配置object-
    header列表头部string|ReactNode-
    itemLayout设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排string-
    loading当卡片内容还在加载中时,可以用 loading 展示一个占位boolean|object (更多)false
    loadMore加载更多string|ReactNode-
    pagination对应的 pagination 配置, 设置 false 不显示boolean|objectfalse
    sizelist 的尺寸default | middle | smalldefault
    split是否展示分割线booleantrue

    List grid props

    参数说明类型默认值
    column列数number-
    gutter栅格间隔number0
    xs<576px 展示的列数number-
    sm≥576px 展示的列数number-
    md≥768px 展示的列数number-
    lg≥992px 展示的列数number-
    xl≥1200px 展示的列数number-
    xxl≥1600px 展示的列数number-

    List.Item

    参数说明类型默认值
    actions列表操作组,根据 itemLayout 的不同, 位置在卡片底部或者最右侧Array<ReactNode>-
    extra额外内容, 通常用在 itemLayoutvertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧string|ReactNode-

    List.Item.Meta

    参数说明类型默认值
    avatar列表元素的图标ReactNode-
    description列表元素的描述内容string|ReactNode-
    title列表元素的标题string|ReactNode-