「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 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之32 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin1134 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式
东北南西3 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱3 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
quan26314 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js