「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 (<Cardtitle="这是标题"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>
);

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx的学习(二):负载均衡和动静分离

简介 nginx的负载均衡和动静分离的简单使用 负载均衡配置 外部访问linux的ip地址:80/edu/a.html地址&#xff0c;会轮询访问Tomcat8080和Tomcat8081服务。 Tomcat的准备 准备两个Tomcat&#xff0c;具体准备步骤在nginx的学习一的反向代理例子2中&#xff0c;在Tomcat8080…

崖山异构数据库迁移利器YMP初体验-Oracle迁移YashanDB

前言 首届YashanDB「迁移体验官」开放后&#xff0c;陆续收到「体验官」们的投稿&#xff0c;小崖在此把优秀的投稿文章分享给大家~今天分享的用户文章是《崖山异构数据库迁移利器YMP初体验-Oracle迁移YashanDB》&#xff08;作者&#xff1a;小草&#xff09;&#xff0c;满满…

让你的程序有记忆功能。

目录 环境 代码 环境 大语言模型&#xff1a; gpt-40-mini Mem0: Empower your AI applications with long-term memory and personalization OpenAPI-Key: Mem0-Key&#xff1a; 代码 import osfrom dotenv import load_dotenv from openai import OpenAI from m…

ASPICE如何确保汽车软件产品质量的稳固基石

ASPICE通过一系列的方法和原则来保障汽车软件产品的质量&#xff0c;以下是其保障产品质量的几个关键方面&#xff1a; 制定明确的质量方针和目标&#xff1a; ASPICE要求组织制定明确的质量方针和目标&#xff0c;这些方针和目标与客户需求和预期相一致。 开发团队需要定义软…

网络安全领域五大注入攻击类型介绍

在网络安全领域&#xff0c;注入攻击是一种常见的攻击方式&#xff0c;攻击者通过向应用程序发送恶意数据来操控应用程序的行为。以下跟随博主通过具体样例一起来掌握以下五种知名的注入攻击类型。 1. SQL注入&#xff08;SQL Injection&#xff09; 1.1. 概述 SQL注入是最常见…

OAuth2 + Gateway统一认证一步步实现(公司项目能直接使用),密码模式授权码模式

文章目录 认证的具体实现环境的搭建基础版授权服务搭建引入依赖创建数据表yml配置配置SpringSecurity定义认证授权的配置类授权服务器存储客户端信息修改授权服务配置&#xff0c;支持密码模式 基础版授权服务测试授权码模式测试密码模式测试**测试校验token接口** 整合JWT使用…

Ubuntu下安装qt5

QT5 安装&#xff08;Ubuntu20.04&#xff09; 详细 安装qt charts sudo apt install libqt5charts5-dev

内网对抗-隧道技术篇防火墙组策略FRPNPSChiselSocks代理端口映射C2上线

知识点&#xff1a; 1、隧道技术篇-传输层-工具项目-Frp&Nps&Chisel 2、隧道技术篇-传输层-端口转发&Socks建立&C2上线Frp Frp是专注于内网穿透的高性能的反向代理应用&#xff0c;支持TCP、UDP、HTTP、HTTPS等多种协议。可以将内网服务以安全、便捷的方式通过…

探索算法系列 - 滑动窗口

目录 长度最小的子数组&#xff08;原题链接&#xff09; 无重复字符的最长子串&#xff08;原题链接&#xff09; 最大连续1的个数 III&#xff08;原题链接&#xff09; 将 x 减到 0 的最小操作数&#xff08;原题链接&#xff09; 水果成篮&#xff08;原题链接&#x…

首个卫星影像全球一张图发布

数据是GIS的血液&#xff01; 我们在《如何加载卫星影像全国一张图》一文中&#xff0c;为你分享过加载卫星影像全国一张图的方法。 现在用该方法&#xff0c;你已经可以加载卫星影像全球一张图了&#xff01; 如何查看全球卫星影像 为了一睹为快&#xff0c;你可以打开以下…

numpy读文档:numpy.exceptions 1.20 大全

numpy.exceptions 文章目录 numpy.exceptionsWarnings&#xff1a;ComplexWarningWarnings&#xff1a;VisibleDeprecationWarningWarnings&#xff1a;RankWarningexceptions&#xff1a;AxisErrorexceptions&#xff1a;DTypePromotionErrorexceptions&#xff1a;TooHardErr…

14 集合运算符和矩阵乘法运算符@

集合的交集、并集、对称差集等运算借助于位运算符来实现&#xff0c;而差集则使用减号运算符实现。 print({1, 2, 3} | {3, 4, 5}) # 并集&#xff0c;自动去除重复元素 print({1, 2, 3} & {3, 4, 5}) # 交集 print({1, 2, 3} - {3, 4, 5}) # 差集 print({1, 2, 4, 6, …

【Python】打印图案 .center(width)

一、题目 Mr. Vincent works in a door mat manufacturing company. One day, he designed a new door mat with the following specifications: Mat size must be N*M. (N is an odd natural number, and M is 3 times N.)The design should have WELCOME written in the ce…

Pandas Series对象的创建和基本使用(Pandas Series Object)

pandas是Python的一个第三方数据分析库&#xff0c;其集成了大量的数据模型和分析工具&#xff0c;可以方便的处理和分析各类数据。Pandas中主要对象类型有Series&#xff0c;DataFrame和Index。本文介绍Series对象的创建和基本用法。 文章目录 一、Series对象的创建1.1 通过序…

Linux|多线程(三)

线程池 线程池是一种多线程处理形式&#xff0c;处理过程中它将被提交的任务分配给预先创建好的多个线程中的一个去执行。 线程池的实现 #pragma once #include <pthread.h> #include <vector> #include <string> #include <unistd.h> #include <…

Conda pack 进行Python环境打包

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 基于Dify的智能分类方案&#xff1a;大模型结合KNN算法&#xff08;附代码&#xff…

第一次CCF计算机软件能力认证

AcWing 3197. 相反数 有 N 个非零且各不相同的整数。 请你编一个程序求出它们中有多少对相反数(a 和 −a 为一对相反数)。 输入格式 第一行包含一个正整数 N。 第二行为 N 个用单个空格隔开的非零整数&#xff0c;每个数的绝对值不超过 1000&#xff0c;保证这些整数各不相同。…

使用netty编写syslog日志接收服务端

使用netty编写syslog日志接收服务端 1.添加netty依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.72.Final</version> <!-- 版本号可能需要根据实际情况更新 --></dependenc…

Docker Desktop安装(通俗易懂)

1、官网 https://www.docker.com/products/docker-desktop/ 2、阿里云镜像 docker-toolbox-windows-docker-for-windows安装包下载_开源镜像站-阿里云 1. 双击安装文件勾选选项 意思就是&#xff1a; Use WSL 2 instead of Hyper-V (recommended) : 启用虚拟化&#xff0c;…

重生之“我打数据结构,真的假的?”--4.二叉树

1.对称二叉树 . - 力扣&#xff08;LeetCode&#xff09; 思路 &#xff1a; 1.设置两个队列l&#xff0c;r&#xff0c;先将root的左节点入l&#xff0c;右节点入r。 2.分别出队&#xff0c;若出队元素相同 Queuepush(&l, front->left); Queuepush(&l, front->…