挑战用React封装100个组件【001】
项目地址
https://github.com/hismeyy/react-component-100
组件描述
组件适用于需要展示图文信息的场景,比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示
样式展示
代码展示
InfoCard.tsx
import './InfoCard.css'interface InfoCardProps {title: string;description: string;imgSrc: string;imgAlt?: string;
}const InfoCard = ({ title, description, imgSrc, imgAlt = title
}: InfoCardProps) => {return (<div className='info-card'><div className='img'>{imgSrc && <img src={imgSrc} alt={imgAlt} />}</div><div className="info"><h6>{title}</h6><p>{description}</p></div></div>)
}export default InfoCard
InfoCard.css
.info-card {box-sizing: border-box;width: 240px;height: 80px;border-radius: 10px;background-color: #F5F5F5;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);display: flex;justify-content: left;align-items: center;padding: 5px 5px 5px 10px;cursor: pointer;transition: all 0.3s ease;transform-origin: center;
}.info-card .img {width: 60px;height: 60px;border-radius: 6px;overflow: hidden;display: flex;justify-content: center;align-items: center;transition: transform 0.3s ease;
}.info-card .img img {width: 100%;height: 100%;object-fit: cover;
}.info-card .info{margin-left: 5px;height: 60px;
}.info-card .info h6 {all: unset;display: block;width: 160px;font-size: 14px;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color 0.3s ease;
}.info-card .info p {all: unset;display: -webkit-box;width: 160px;margin-top: 10px;font-size: 12px;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;line-height: 1.3;transition: color 0.3s ease;line-clamp: 2;box-orient: vertical;
}.info-card:hover {transform: translateY(-2px) scale(1.02);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);background-color: #ffffff;
}.info-card:hover .img {transform: scale(1.05);
}.info-card:hover .info h6 {color: #f08a5d;
}.info-card:hover .info p {color: #666;
}
使用
App.tsx
import './App.css'
import InfoCard from './components/card/infoCard01/InfoCard'function App() {return (<><InfoCardtitle="React 18 新特性"description="React 18 带来了令人兴奋的新特性,包括自动批处理、Transitions API 和 Suspense 的改进。这些更新显著提升了应用性能和用户体验。"imgSrc="https://cdn1.iconfinder.com/data/icons/programing-development-8/24/react_logo-512.png"/></>)
}export default App
相关文章:

挑战用React封装100个组件【001】
项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于需要展示图文信息的场景,比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示 样式展示 代码展示 InfoCard.tsx import ./InfoCard.cssinterface InfoCardProps {ti…...

linux高级系统编程之进程
进程 一个正在进行的程序 并行与并发 并行:执行的程序在不同CPU上同时执行 并发:一个CPU,多个进程交替执行,因为交替速度很快,所以从宏观上来看是同时执行的,但是从围观的角度是交替执行的 单道与多道 单道程序设计:所有进程一个一个排队执行,若A阻塞,B只能等待,,即使CPU处于空…...
nextjs+nestjs+prisma写todolist全栈项目
技术栈 nextjsnestjsprisma所学知识 Nextjs组件渲染,状态,路由docker启动Mysql容器prisma操作Mysql(CRUD)允许跨域请求APITanStack Query异步状态管理fetch api服务器组件预请求数据nestjs 管道和异常处理检测id是否正整数Docker启动Mysql容器 compose.yml name: todoLis…...

基于Matlab的图像去噪算法仿真
中值滤波的仿真 本节选用中值滤波法对含有高斯噪声和椒盐噪声的图像进行去噪,并用Matlab软件仿真。 (1)给图像加入均值为0,方差为0.02的高斯噪声,分别选择33模板、55模板和77模板进行去噪 Matlab部分代码࿱…...

Docker pull镜像拉取失败
因为一些原因,很多镜像仓库拉取镜像失败,所以需要更换不同的镜像,这是2024/11/25测试可用的仓库。 标题1、 更换镜像仓库的地址,编辑daemon.json文件 vi /etc/docker/daemon.json标题2、然后将下面的镜像源放进去或替换掉都可以…...

fastjson不出网打法—BCEL链
前言 众所周知fastjson公开的就三条链,一个是TemplatesImpl链,但是要求太苛刻了,JNDI的话需要服务器出网才行,BCEL链就是专门应对不出网的情况。 实验环境 fastjson1.2.4 jdk8u91 dbcp 9.0.20 什么是BCEL BCEL的全名应该是…...

vue2 中使用 Ag-grid-enterprise 企业版
文章目录 问题Vue2 引入企业版不生效npm run dev 时卡住了94% after seal 卡在这里了测试打包源 git 解决方案记录 问题 我想用企业版的树状表格 Vue2 引入企业版不生效 编译引入 // vue.config.js module.exports {transpileDependencies: ["ag-grid-enterprise"…...

Redis开发03:常见的Redis命令
1.输入以下命令,启动redis。 sudo service redis-server start 如果你是直接安装在WSL的,搜索栏搜索Ubuntu或者点击左下角Windows图表找到U那一栏,直接打开Ubentu,输入账密后,输入“sudo service redis-server start”…...
研0找实习【学nlp】14--BERT理解
以后做项目,一定要多调查,选用不同组合关键词多搜索! BERT论文解读及情感分类实战_bert模型在imdb分类上的准确率已经到达了多少的水平-CSDN博客 【深度学习】-Imdb数据集情感分析之模型对比(4)- CNN-LSTM…...

mysql之基本常用的语法
mysql之基本常用的语法 1.增加数据2.删除数据3.更新/修改数据4.查询数据4.1.where子句4.2.order by4.3.limit与offset4.4.分组与having4.5.连接 5.创建表 1.增加数据 insert into 1.指定列插入 语法:insert into table_name(列名1,列名2,....,列名n) values (值1,值…...

基于Linux的patroni搭建标准
作者:Digital Observer(施嘉伟) Oracle ACE Pro: Database PostgreSQL ACE Partner 11年数据库行业经验,现主要从事数据库服务工作 拥有Oracle OCM、DB2 10.1 Fundamentals、MySQL 8.0 OCP、WebLogic 12c OCA、KCP、PCTP、PCSD、P…...

2024年第十三届”认证杯“数学中国数学建模国际赛(小美赛)
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓...

Unity类银河战士恶魔城学习总结(P149 Screen Fade淡入淡出菜单)
【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了进入游戏和死亡之后的淡入淡出动画效果 UI_FadeScreen.cs 1. Animator 组件的引用 (anim) 该脚本通过 Animator 控制 UI 元…...

(四)3D视觉机器人的手眼标定(眼在手外)
内容 1.背景介绍1.1 思路T_target_to_cam求解公式求解 2.操作流程 1.背景介绍 3D视觉机器人指的是机器人通过3D相机提供的3D点云视觉信息,完成某些实际的功能。 目标是将场景信息从相机坐标系变换至机械臂坐标系中,最终是获得相机到机械臂基座的空间…...

安达发|制造业APS智能优化排产软件的四类制造模型解决方案
在制造业中,APS(高级计划和排程系统)智能优化排产软件的应用越来越广泛。它通过集成先进的算法和模型,帮助企业提高生产效率、降低成本并提升客户满意度。针对不同类型的生产需求,APS软件提供了四类制造模型解决方案&a…...

命令行使用ssh隧道连接远程mysql
本地电脑A 跳板机B 主机2.2.2.2 用户名 B ssh端口号22 登录密码bbb 远程mysql C 地址 3.3.3.3 端口号3306 用户名C 密码ccc A需要通过跳板机B才能访问C; navicat中配置ssh可以实现在A电脑上访问C 如何实现本地代码中访问C呢? # 假设本地使…...
力扣第 71 题 简化路径
一、题目描述 给定一个字符串 path,表示一个由目录名和斜杠 "/" 组成的绝对路径,请简化该路径,使其变为规范路径。 在 Unix 风格的文件系统中: 一个点 "." 表示当前目录本身;两个点 "..&q…...

使用ENSP实现OSPF
一、项目拓扑 二、项目实现 1.路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为1.1.1.1/24 ip address 1.1.1.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为2…...
分布式下怎么优化处理数据,怎么代替Join
分布式下怎么优化处理数据,怎么代替Join 简单来说, 可以采用 数据冗余,有意地存储一些重复的数据,以此减少关联查询的需求 数据拆分与多次查询,将一次获取的多表数据,拆分多个单独的查询 使用数据仓库…...

51单片机快速入门之中断的应用 2024/11/23 串口中断
51单片机快速入门之中断的应用 基本函数: void T0(void) interrupt 1 using 1 { 这里放入中断后需要做的操作 } void T0(void): 这是一个函数声明,表明函数 T0 不接受任何参数,并且不返回任何值。 interrupt 1: 这是关键字和参…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...

高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...