Hay tarjetas de noticias. Cuando pasas la flecha del mouse, puedes ver los detalles. Al hacer clic en la tarjeta, puede ir a una publicación de Instagram.
Tarjetas de noticias en el escritorio.
¿Cómo hacer posible ver los detalles en un dispositivo móvil deslizando el dedo hacia arriba? Y después de eso, el bloque volvió al lugar.
TarjetaNoticias.js:
import PropTypes from "prop-types"; import Image from "next/image"; import Link from "next/link"; import styles from "./NewsCard.module.scss"; import DeleteIcon from "../../public/svg/basketIcon.svg"; export default function NewsCard({ newsData, color, canDelete, onDeleteIconClick, }) { return ( <Link href={newsData.url} passHref> <div className={styles.card}> {canDelete ? ( <div className={styles.deleteIcon}> <DeleteIcon onClick={() => { onDeleteIconClick(newsData); }} /> </div> ) : null} <Image src={newsData.imgUrl} alt="news-card" layout="fill" className={styles.image} /> <div className={styles.info} style={{ background: color }}> {newsData.text} </div> </div> </Link> ); } NewsCard.propTypes = { newsData: PropTypes.object, color: PropTypes.string, };Estilos:
@import "../../styles/shared.scss"; .card { width: 350px; height: 344px; margin-right: 20px; position: relative; border-radius: 3px; cursor: pointer; overflow: hidden; @media screen and (max-width: 1150px) { min-width: 250px; min-height: 333px; } } .info { height: 256px; top: 308px; width: 100%; position: absolute; bottom: 0; border-radius: 0px 0px 3px 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 600; font-size: 12px; line-height: 22px; letter-spacing: 0.2px; color: $color-primary-light; padding: 10px 7px 7px 6px; transition: 0.5s; } .info:hover { transform: translateY(-208px); -webkit-line-clamp: 100; padding-top: 30px; } .image { border-radius: 3px; } .deleteIcon { border: none; position: absolute; cursor: pointer; top: 6px; right: 6px; z-index: 3; display: flex; justify-content: center; align-items: center; padding: 0; svg { width: 15px; height: 15px; } border-radius: 50%; width: 25px; height: 25px; background: $color-primary-light; }Puede usar la biblioteca React Swipeable y definir un controlador de "deslizar hacia arriba" para mostrar los detalles de la tarjeta. al igual que:
const [showDetails, setShowDetails] = useState(false); const handlers = useSwipeable({ onSwipedUp: () => setShowDetails(true), });Luego aplique el controlador al elemento de la tarjeta:
<div className={styles.card} {...handlers}> Y finalmente use el estado showDetails para mostrar los detalles de la tarjeta.