挑战用React封装100个组件【002】

项目地址
https://github.com/hismeyy/react-component-100

组件描述

组件适用于需要展示图文信息的场景,比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示

样式展示

代码展示

InfoCard.tsx
js 复制代码
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
js 复制代码
.info-card {
    box-sizing: border-box;
    width: 350px;
    height: 450px;
    border-radius: 15px;
    background-color: #F5F5F5;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 15px;
    cursor: pointer;
    transform-origin: center;
    position: relative;
    overflow: hidden;
}

.info-card .img {
    width: 320px;
    height: 320px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card .info {
    margin: 20px 5px 0;
    height: 60px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.info-card .info h6 {
    all: unset;
    display: block;
    width: 100%;
    font-size: 16px;
    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: 100%;
    margin-top: 10px;
    font-size: 12px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    line-height: 1.3;
    line-clamp: 2;
    box-orient: vertical;
}

.info-card:hover .img {
    transform: scale(1.02);
}

.info-card:hover .img img {
    transform: scale(1.1);
}

.info-card:hover .info h6 {
    color: #f08a5d;
}

使用

App.tsx
js 复制代码
import './App.css'
import InfoCard from './components/card/infoCard02/InfoCard'

function App() {
  return (
    <>
      <InfoCard
        title="Web全栈开发指南"
        description="全面的Web开发学习指南,涵盖前端技术、后端开发、数据库设计等多个领域的知识。本课程将帮助你构建完整的开发技能体系。"
        imgSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&q=80"
      />
    </>
  )
}

export default App
相关推荐
百锦再42 分钟前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5
thinkQuadratic1 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
小鸭呱呱呱1 小时前
【CSS】- 表单控件的 placeholder 如何控制换行显示?
前端·javascript·css·深度学习·面试·职场和发展·html
Book_熬夜!2 小时前
Vue2——组件的注册与通信方式、默认插槽、具名插槽、插槽的作用域
前端·javascript·vue.js·前端框架·ecmascript
噶琪4 小时前
理解《CSS世界》盒模型、流、布局
前端·css
小陆猿4 小时前
前端面试 - 如何理解 防抖和节流?
javascript·面试·前端框架
the_one4 小时前
《Canvas 炫酷动态粒子连线:从零打造流动星空特效》
前端·javascript·css
剪刀石头布啊4 小时前
ECMAScript、html头、dom、bom、a空链、选择器、css样式继承等、css通用属性值、文档流等
css·html
还是鼠鼠6 小时前
Node.js 路由 - 初识 Express 中的路由
前端·vscode·前端框架·npm·node.js·express
田本初8 小时前
vue-cli工具build测试与生产包对css处理的不同
前端·css·vue.js