Ant-Design-Pro-ProList使用的例子

我们来看一个简单的 Ant Design Pro ProList 的使用示例：

import { ProList, Card, Typography } from '@ant-design/pro-layout';

const { Title, Paragraph } = Typography;

const dataSource = [
  {
    title: 'Ant Design Title 1',
    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  },
  {
    title: 'Ant Design Title 2',
    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  },
  {
    title: 'Ant Design Title 3',
    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  },
];

const renderItem = (item, index) => {
  return (
    <Card key={index} style={{ marginBottom: 16 }}>
      <Title level={4}>{item.title}</Title>
      <Paragraph>{item.description}</Paragraph>
    </Card>
  );
};

const Example = () => {
  return (
    <ProList dataSource={dataSource} rowKey="title" split pagination={{ pageSize: 3 }}>
      {renderItem}
    </ProList>
  );
};

export default Example;

这个例子中，我们创建了一个简单的 Ant Design ProList 组件，使用了 dataSource 数据源来渲染列表，每一项数据都包含标题和描述。我们通过 renderItem 函数来自定义每一项的渲染方式，这里我们使用了 Ant Design 的 Card 和 Typography 组件来渲染每一项。

我们同时启用了分页功能，每页显示 3 项数据。