ReactJS UI Ant 设计卡片组件

简介

Ant Design 是一套由 Ant Design 设计语言构建而成的 UI 组件库，其中包括了丰富的 ReactJS 组件。其中，组件卡片（Card）作为页面布局的重要组成部分之一，具有良好的可复用性和扩展性。

本文将介绍如何在 ReactJS 中使用 Ant Design 设计语言构建卡片组件，并提供基础代码示例。

安装

使用 npm 进行安装：

npm install antd --save

使用

引入需要的组件

在需要用到卡片组件的页面或组件中引入 Card 组件：

import { Card } from 'antd';

最基本的卡片组件

使用 Card 组件进行基本的卡片设计：

<Card title="卡片标题" bordered={false}>
    <p>卡片内容</p>
</Card>

卡片内嵌套其他元素

卡片组件可以内嵌其他元素，如 Button 组件。

<Card title="内嵌其他元素的卡片" style={{ width: 300 }}
    cover={
        <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"/>
    }
    actions={[
        <Button size="small" type="primary">操作一</Button>,
        <Button size="small" type="primary">操作二</Button>,
    ]}
>
    <Meta
        title="这是卡片的标题"
        description="这是卡片的描述"
    />
</Card>

带有图片的卡片

使用 cover 属性可以为卡片组件添加图片。

<Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="图片卡片" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
>
    <Meta title="这是卡片的标题" description="这是卡片的描述" />
</Card>

总结

本文介绍了如何在 ReactJS 中使用 Ant Design 设计语言构建卡片组件，并提供了基本的使用示例。Ant Design 组件库中的卡片组件具有丰富的可扩展性，可以在不同的业务场景中灵活运用。