javascript - 如何使用 React js 在 ant 设计的网格中添加卡片

Question

什么是蚂蚁设计？具有自然和确定性价值的设计系统，可提供更好的企业应用程序用户体验阅读更多>> https://ant.design/

卡片可用于显示与单个主题相关的内容。内容可以由不同类型和大小的多个元素组成。如果您需要在网格系统中添加卡试试这个

在这里，我使用 3 Grid in row（您可以根据您的要求进行更改）。

代码：

import React from 'react';
import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
import { Row, Col } from 'antd';

class Surveys extends React.Component{

  render() {
      return (
      <Row gutter={16}>
        <Col className="gutter-row" span={8}>
        <Card
          cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
          actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
        >
          <Meta
            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            title="Card title"
            description="This is the description"
          />
        </Card>
        </Col>

        <Col className="gutter-row" span={8}>
        <Card
          cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
          actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
        >
          <Meta
            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            title="Card title"
            description="This is the description"
          />
        </Card>
        </Col>
        <Col className="gutter-row" span={8}>
        <Card
          cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
          actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
        >
          <Meta
            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            title="Card title"
            description="This is the description"
          />
        </Card>
        </Col>
        </Row>
  );
  }
}

export default Surveys;

输出：

标签： javascriptreactjsweb-applicationscomponentsantd