「Ant Design」Antd 中卡片如何完全不展示内容区域、按需展示内容区域、不展示标题

前言

下面是默认的 Antd 卡片,由以下区域组成

处理 Antd 的 Card 展示形式大致有下面三种

卡片完全不展示内容区域

复制代码
const App = () => (
    <Card title="Default size card" extra={<a href="#">More</a>} 
    style={{ width: 300 }}
    bodyStyle={{display:'none'}}>
      <p>Card content</p>
    </Card>
);

按需展示内容区域

引入一个状态

复制代码
import React, { useState } from 'react';
import { Card, Button } from 'antd';
import 'antd/dist/reset.css';

const App = () => {
  const [showContent, setShowContent] = useState(false);

  return (
    <Card
      title="这是标题"
      extra={<a href="#">更多</a>}
      style={{ width: 300 }}
    >
      {showContent && (
        <div>这是内容区域</div>
      )}
      <Button onClick={() => setShowContent(!showContent)}>
        切换内容显示
      </Button>
    </Card>
  );
};

export default App;

不展示标题区域

复制代码
import { Card } from 'antd';
import React from 'react';
const App = () => (
    <Card  
    style={{ width: 300 }}
>
      <p>Card content</p>
    </Card>
);
相关推荐
小赖同学啊2 分钟前
光伏园区3d系统管理
前端·javascript·3d
前端进阶者9 分钟前
js通知提醒
前端·javascript
快起来别睡了22 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
Goodbaibaibai32 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
OEC小胖胖40 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
胡gh41 分钟前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js
_一两风42 分钟前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js
断竿散人1 小时前
JavaScript 错误对象完全指南:内置类型解析与自定义异常实战
前端·javascript
默默地离开1 小时前
Blob二进制处理的王者
前端·javascript·html
红衣信1 小时前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试