Card List en React JS animado con CSS

En React.js, los conceptos de "card" y "cardlist" generalmente se utilizan para representar elementos visuales en una interfaz de usuario. Aunque no hay una implementación específica de "card" o "cardlist" en React, estos términos se refieren comúnmente a componentes que muestran información de manera estructurada y organizada, como tarjetas individuales y listas de tarjetas.

Aquí tienes un ejemplo simple de cómo podrías estructurar componentes de tarjeta (Card) y lista de tarjetas (CardList) en React:

Diseño UI de un CardList en React JS

App.jsx

import './App.css'
import CardList from './components/CardList'

function App() {

  return (
    <>
      <div className="container">
      <CardList/>
      </div>
    </>
  )
}

export default App

App.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
*{
  margin: 0;
}
body{
  background: indigo;
  font-family: 'Roboto', sans-serif;
}
.container{
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

CARDLIST en React JS

CardList.jsx

import React from 'react'
import Card from './Card'
import './cardList.css'

const CardList = () => {
  return (
    <div className='cardList'>
        <Card name="Javascript desde Cero" date="20.11.2023" logo="javascript.jpg" price="10.00"/>
        <Card name="Python Avanzado" date="20.11.2023" logo="python.jpg" price="10.00"/>
        <Card name="Next JS Básico" date="20.11.2023" logo="nextjs.jpg" price="10.00"/>
        <Card name="React JS desde Cero" date="20.11.2023" logo="reactjs.jpg" price="10.00"/>
    </div>
  )
}

export default CardList

cardList.css

.cardList{
   max-width: 450px; 
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   padding: 10px;
   gap: 20px;
}

CARD en React JS

card.jsx

import React from 'react'
import './card.css'
const Card = (data) => {
  return (
    <div className='card'>
        <div className="card_logo">
            <img src={`http://localhost:5173/src/assets/${data.logo}`} alt="" />
        </div>
        <div className="card_data">
            <h2>{data.name}</h2>
            <p>{data.date} | {data.price} </p>
        </div>
    </div>
  )
}

export default Card

card.css

.card{
    background: blueviolet;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.654);
    padding: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.75s ease-in-out;
}
.card:hover{
    background: white;
    box-shadow: 0 0 50px white;
}
.card_logo img{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border:  7px peachpuff solid;
    transition: all .5s ease-out;
}
.card_data{
    color: white;
    transition: all .5s;
}

.card:hover>.card_data{
    color: indigo;
    transform: translateX(-45%) scale(1.1);
}
.card:hover>.card_data p{
    display: none;
}
.card:hover>.card_logo img{
    border-radius: 50%;
    transform: translateX(270%) scale(1.8);
}

En este ejemplo:

• Card es un componente que representa una tarjeta individual con un título y un contenido.
• CardList es un componente que toma una lista de datos de tarjetas (cards) y renderiza una lista de componentes Card.
• El componente principal (App) utiliza CardList y proporciona un conjunto de datos de tarjetas.

Ten en cuenta que el código anterior es un ejemplo básico y puede adaptarse según tus necesidades específicas. Puedes personalizar el diseño, estilo y funcionalidad según los requisitos de tu aplicación. Además, puedes agregar más propiedades a los componentes para hacerlos más flexibles y reutilizables.

En el contexto de desarrollo web y aplicaciones, el término "card" se refiere a un componente visual que se utiliza para presentar información de manera estructurada y atractiva. Las tarjetas suelen contener elementos como imágenes, texto, enlaces y otros componentes multimedia, y se utilizan para representar unidades discretas de contenido.

Aquí hay algunas razones comunes por las que se utilizan las tarjetas en interfaces de usuario:

1. Organización visual: Las tarjetas proporcionan una manera organizada y visualmente atractiva de mostrar información. Cada tarjeta representa un elemento individual o un conjunto de datos relacionados.

2. Flexibilidad y modularidad: Las tarjetas son componentes modulares que pueden contener diversos tipos de contenido. Esto facilita la creación de interfaces flexibles y adaptables.

3. Interactividad: Las tarjetas pueden ser interactivas, permitiendo a los usuarios hacer clic en ellas para obtener más detalles o realizar acciones específicas. Por ejemplo, hacer clic en una tarjeta puede llevar a una página de detalles o activar alguna funcionalidad.

4. Responsividad: Las tarjetas son útiles para diseñar interfaces que se adaptan bien a diferentes tamaños de pantalla, ya que su disposición en una cuadrícula puede cambiar según el espacio disponible.

5. Presentación de contenido variado: Pueden contener una combinación de elementos multimedia, como imágenes, videos, íconos y texto, lo que facilita la presentación de información de manera rica y atractiva.

En el ejemplo anterior de React, el componente Card podría ser utilizado para representar visualmente un elemento de contenido específico, como un artículo, una publicación en redes sociales, un producto en una tienda en línea, entre otros. La CardList podría utilizarse para mostrar una lista de estas tarjetas.

Leido 711 veces