蚂蚁设计卡片。向 Meta 添加更多信息

Question

import { Card } from 'antd';
const { Meta } = Card;

ReactDOM.render(
  <Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta
      title="Europe Street beat"
      description="www.instagram.com"
    />
  </Card>
, mountNode);

在 AntDesign 的示例中，在 Card 的 Meta 部分，有没有一种方法可以向卡片添加更多描述，如 "price" 或 "author" 并显示它？

Answer 1

遗憾的是，Meta 仅支持 title 和 description 等固定属性。 https://ant.design/components/card/#Card.Meta

但是如果你想在卡片中添加额外的字段，你可以将它们添加到 Card html as children:

<Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta
      title="Europe Street beat"
      description="www.instagram.com"
    />
    <div className="additional">
      <p className="price">Price: 20$</p>
      <p>Author: John Doe</p>
    </div>
  </Card>

参见 Codepen Demo。

Answer 2

可以这样做

const { Card } = antd;
const { Meta } = Card;

ReactDOM.render(
  <Card
    hoverable
   style={{ width: 240 }}
   cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
 >
<Meta
  title="Europe Street beat"
  description={[
         <div>
             <p>"www.instagram.com"</p>
             <p> additional content</p>
          </div>
        ]}
      />
   <div className="additional">
     <p className="price">Price: <span className="quantity">20$</span></p>
     <p>Author: <span className="quantity">John Doe</span></p>
   </div>
   </Card>
  , mountNode);

Answer 3

Meta 仅支持 title 和 description 等固定属性。但是如果你想在你的卡片中添加更多细节，你可以借助 description 道具来完成，它支持 Meta.

您只需要像在 JSX 中一样编写代码。

<Card hoverable style={{ width: 300, marginTop: 16 }}>
        <Meta
          description={                   //Add your specific data here in description
            <>
              <div className="subject-card_extra-content">
               <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{width:20}}/>
               <span>Data</span>
              </div>

              <div className="dashboard-subject_inline-actions">
                <Icon type="video-camera" />
                <p>
                  Total Videos :<span> {5} </span>
                </p>
              </div>

              <Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
                Continue Learning
              </Button>

              <Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
                No Progress
              </Button>
            </>
          }
        />
      
    </Card>

蚂蚁设计卡片。向 Meta 添加更多信息

Ant Design Cards. Adding more information to Meta

reactjs

antd