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

项目地址
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: 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
js 复制代码
import './App.css'
import InfoCard from './components/card/infoCard01/InfoCard'

function App() {
  return (
    <>
      <InfoCard
        title="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
相关推荐
小菜全2 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
Baklib梅梅7 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
duansamve7 小时前
React 18项目中使用环境变量(适用于不同环境下的配置常量)
react.js
知识分享小能手9 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
小刘鸭地下城11 小时前
告别服务端渲染卡顿!useSyncExternalStore 优化水合作用全解析
react.js
forever_Mamba11 小时前
CSS隐藏页面元素
前端·css
β添砖java11 小时前
CSS定位布局
前端·css·html
Winson℡12 小时前
如何理解 React Native 中的 useEffect
javascript·react native·react.js
lyj16899712 小时前
CSS中 min() max() clamp()函数
前端·javascript·css
乖女子@@@14 小时前
React-props的children属性
前端·javascript·react.js