Tarz bileşenleriyle Yeniden Kullanılabilir Duyarlı Kart bileşeni oluşturun – JSManifest

Tarz bileşenleriyle Yeniden Kullanılabilir Duyarlı Kart bileşeni oluşturun – JSManifest

Merhaba, benim adım christopher ve bu benim ilk blog yazım! Uzun zamandır pusuda olduğum için kendimi dünyaya açmaya karar verdim. Ama şimdi tam zamanlı bir web geliştirici işi aldığım için, diğer geliştiricilere yardım etmek ve web geliştirme topluluğuna daha fazla dahil olmak istediğime karar verdim! Blog yazılarımı ve tavrımı beğendiyseniz, düzenli olarak tepki, javascript ve genel olarak web geliştirme dünyası hakkında ilginç blog yazıları yayınlayacağım bültenlerime abone olmaktan çekinmeyin!

Hadi hareketlenelim.

Kart bileşenleri, yerleşimlerin düzenli, temiz ve zarif görünmesini sağladıkları için sıklıkla kullanılır. Ancak, başka bir yerde bulunan tam içeriğini temsil etmeye yardımcı olmak için ilgili içeriği yakından gruplandırdıkları için de kullanılırlar. Bir Kart bileşenini oluşturan ortak bileşenler genellikle bir başlık, tarih, açıklama ve belirli bir konuda kullanıcı eyleminde ısrar eden yorumlar düğmesi gibi bazı ek bilgilerdir.

Bu yazıda, aşağıdakileri kullanarak bir kart bileşeni oluşturmanız için size rehberlik edeceğim. tarz bileşenler
kitaplık–çok karmaşık UI bileşenleri oluşturma yeteneğine sahip, tarz tepki bileşenleri oluşturmak için kullanılan harika bir araç.

Bu eğiticiye başlamak için yüklemeniz gerekecek styled-components (İsteğe bağlı olarak yükleyebilirsiniz react-icons Karttaki simgeleri görüntülemek için kullanılacaktır).

npm i  --save styled-components

Kart bileşenini oluşturarak başlayacağız:

Card.js

import React from 'react'
import styled from 'styled-components'

const Card = (props) => <div />

export default Card

Genellikle bir Kart bileşenini oluşturan bileşenlerin genellikle bir başlık, tarih ve açıklama olduğundan bahsetmiştik, bu nedenle devam edip bunu Karta uygulayacağız:

import React from 'react'
import styled from 'styled-components'

const Card = (props) => (
  <div style={{ color: '#fff' }}>
    <h2>The Benefits of Green Apples</h2>
    <div>3/2/2019</div>
    <div>
      Green apples have a high fiber content which helps in increasing the
      body's metabolism. While consuming an apple, make sure that you're not
      tossing the peel in the trash. Consuming apple with its peel improves the
      overall health. Due to its high fiber content, apple helps in
      detoxification process. It keeps the liver and digestive system away from
      harmful elements.
    </div>
  </div>
)

export default Card

Artık temel yapıya sahip olduğumuza göre, stil bileşenlerini karışıma uygulamaya devam edebiliriz.

Esnek bir Kart bileşeni için tavsiyem, Karttaki her bir bileşen için bir tepki bileşeni oluşturmaktır. Bu şekilde, her bir bileşeni ayrı ayrı stillendirebilir ve gerekirse diğer bileşenlerle oluşturabiliriz. Başlık, tarih ve açıklama için stil bileşenleri oluşturarak başlayalım:

const Title = styled.h2`
  color: #fff;
  font-weight: 300;
`

const Date = styled.div`
  color: #ccc;
  font-weight: 300;
  margin: 6px 0;
`

const Description = styled.p`
  color: #fff;
  font-weight: 300;
`

Kart bileşenimiz artık biraz daha güzel görünmelidir. Kendi kendini belgeleyen koddan da yararlandık:

import React from 'react'
import styled from 'styled-components'

const Card = (props) => (
  <div style={{ color: '#fff' }}>
    <Title>The Benefits of Green Apples</Title>
    <Date>3/2/2019</Date>
    <Description>
      Green apples have a high fiber content which helps in increasing the
      body's metabolism. While consuming an apple, make sure that you're not
      tossing the peel in the trash. Consuming apple with its peel improves the
      overall health. Due to its high fiber content, apple helps in
      detoxification process. It keeps the liver and digestive system away from
      harmful elements.
    </Description>
  </div>
)

export default Card

Çok perişan değil, değil mi? Ancak bir Kart bileşeni, isteğe bağlı olarak, yorumları görüntüleme veya beğen düğmesine basma gibi ek düğmeler içerebilir. Bu kullanıcı eylemleri en yaygın olarak instagram veya facebook gibi sosyal medya sitelerinde bulunur ve kullanıcının bu konuyla ilgili bir eylem başlatabileceğini gösterir.

Düğmelerimiz için uygulayacağımız yorumlar, seviyorve Görüntüleme:

const ActionButton = styled.button`
  margin: 0 5px;
  padding: 8px 14px;
  background: rgba(155, 155, 155, 0.2);
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  outline: 0;
  font-weight: 300;
  :hover {
    opacity: 0.8;
  }
`
import React from 'react'
import styled from 'styled-components'

const Card = (props) => (
  <div style={{ color: '#fff' }}>
    <Title>The Benefits of Green Apples</Title>
    <Date>3/2/2019</Date>
    <Description>
      Green apples have a high fiber content which helps in increasing the
      body's metabolism. While consuming an apple, make sure that you're not
      tossing the peel in the trash. Consuming apple with its peel improves the
      overall health. Due to its high fiber content, apple helps in
      detoxification process. It keeps the liver and digestive system away from
      harmful elements.
    </Description>
    <ActionButton>0 Comments</ActionButton>
    <ActionButton>0 Likes</ActionButton>
    <ActionButton>0 Views</ActionButton>
  </div>
)

export default Card

Bundan sonra yapacağımız şey, uygulama içeriğinin sahipliğini oluşturucu (ana) bileşene aktararak bunu gerçekten yeniden kullanılabilir bir bileşen yapmaktır. Artık ebeveyn, içeri geçerek hangi içeriğin gösterileceği konusunda kararları veren kişi olacaktır. props.title,props.date, props.descriptionve props.actions:

const Content = (props) => {
  const date = new Date().toLocaleDateString()
  const buttons = [
    {
      label: '0 Comments',
    },
    {
      label: '242 Likes',
    },
    {
      label: '187288 Views',
    },
  ]

  return (
    <Card2
      title="The Benefits of Green Apples"
      date={date}
      description="Green apples have a high fiber content which helps in increasing the
      body's metabolism. While consuming an apple, make sure that you're not
      tossing the peel in the trash. Consuming apple with its peel improves
      the overall health. Due to its high fiber content, apple helps in
      detoxification process. It keeps the liver and digestive system away
      from harmful elements."
      actions={buttons}
    />
  )
}

ve bizim içinde Card bileşen, biz sadece bu aksesuarları alıp render yönteminin içine uygulayacağız:

const Card2 = ({ title, date, description, actions }) => (
  <div style={{ color: '#fff' }}>
    <Title>{title}</Title>
    <Date>{date}</Date>
    <Description>{description}</Description>
    {actions.map(({ label }) => (
      <Action>{label}</Action>
    ))}
  </div>
)

Bu düğmeleri daha fazla öne çıkarmanın ve amaçlarını iletmeye yardımcı olmanın yaygın bir yöntemi, simgeleri metnin hemen yanındaki düğmelere yerleştirmektir. Bazı simgeler eklemeye başlayabiliriz. react-icons Bu biraz daha arkadaşça görünecek şekilde paketleyin:

import { FaCommentAlt, FaThumbsUp, FaRegEye } from 'react-icons/fa'

Ve bunları yakın zamanda oluşturduğumuz düğmeler dizisine uygulayın:

const buttons = [
  {
    label: (
      <>
        <FaCommentAlt /> 0 Comments
      </>
    ),
  },
  {
    label: (
      <>
        <FaThumbsUp /> 242 Likes
      </>
    ),
  },
  {
    label: (
      <>
        <FaRegEye /> 187288 Views
      </>
    ),
  },
]

Kart bileşeninin şimdi nasıl göründüğü aşağıda açıklanmıştır:

Fena değil!

Ancak, simgeler konumlandırma açısından biraz kapalı görünüyor. Yakından bakarsanız, yanlarındaki metinden biraz daha yüksek görünüyorlar.

Kullanacağımız strateji, eylem düğmelerini saracak bir sarmalayıcı bileşen oluşturmaktır.

Bu sarmalayıcı bileşenin amacı, hepsini aynı anda hedeflemek ve stillendirmek için bir seçici uygulayarak, tüm düğmeleri kardeş düğmelerinin kullandığı stillerle aynı hizaya getirmektir:

const Actions = styled.div`
  color: #333;
  display: flex;
  align-items: center;
  svg {
    transform: translateY(2px);
    margin-right: 5px;
  }
`

Şimdi eylem düğmelerini Card bileşen (Not: Ben de yaydım ...props içinde .map ebeveyn tarafından sağlanmışsa, düğme öğesine ek sahne iletebilmemiz için her Eylem düğmesine döngü yapın):

const Card = ({
  title,
  date,
  description,
  comments,
  likes,
  views,
  actions,
}) => (
  <div style={{ color: '#fff' }}>
    <Title>{title}</Title>
    <Date>{date}</Date>
    <Description>{description}</Description>
    <Actions>
      {actions.map(({ label, ...props }) => (
        <Action {...props}>{label}</Action>
      ))}
    </Actions>
  </div>
)

Yaşasın, işimiz bitti!

Size kolaylık sağlamak için, kodun tamamını “pop” yapmak için bazı özel stillere eklemeler yapacağım.

İşte son kod (duyarlı tasarım için medya sorgularını içerir):

Card.js:

import React from 'react'
import styled from 'styled-components'

const StyledContainer = styled.div`
  border: ${(props) => `1px solid ${props.theme.border.cool}`};
  padding: 25px 12px 18px;
  background: ${(props) => `linear-gradient(
    45deg, ${props.theme.primary.main}, ${props.theme.secondary.main}
  )`};
`

const Title = styled.h2`
  color: #fff;
  font-weight: 300;
  @media (max-width: 500px) {
    font-size: 1rem;
  }
`

const Date = styled.div`
  color: #ccc;
  font-weight: 300;
  margin: 6px 0;
  @media (max-width: 500px) {
    font-size: 0.8rem;
  }
`

const Description = styled.p`
  color: #fff;
  font-weight: 300;
  @media (max-width: 500px) {
    font-size: 0.75rem;
  }
`

const Actions = styled.div`
  color: #333;
  display: flex;
  align-items: center;
  svg {
    transform: translateY(2px);
    margin-right: 5px;
  }
  @media (max-width: 500px) {
    flex-direction: column;
    & button {
      width: 100%;
      margin-bottom: 4px;
      font-size: 0.65rem;
    }
  }
`

const Action = styled.button`
  margin: 0 5px;
  padding: 8px 14px;
  background: rgba(155, 155, 155, 0.2);
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  outline: 0;
  font-weight: 300;
  :hover {
    opacity: 0.8;
  }
  :active {
    background: ${(props) => props.theme.primary.main};
  }
`

const Card = ({
  title,
  date,
  description,
  comments,
  likes,
  views,
  actions,
}) => (
  <StyledContainer>
    <Title>{title}</Title>
    <Date>{date}</Date>
    <Description>{description}</Description>
    <Actions>
      {actions.map(({ label }) => (
        <Action>{label}</Action>
      ))}
    </Actions>
  </StyledContainer>
)

export default Card

Parent.js

import React from 'react'
import styled from 'styled-components'
import { FaCommentAlt, FaThumbsUp, FaRegEye } from 'react-icons/fa'
import Card from './Card'

const StyledRoot = styled.div`
  padding: 50px 12px;
`

const StyledContainer = styled.div`
  max-width: 550px;
  width: 100%;
  margin: auto;
`

const Parent = () => {
  const date = new Date().toLocaleDateString()

  const onCommentClick = () => alert('You clicked comments')
  const onLikesClick = () => alert('You clicked comments')
  const onViewsClick = () => alert('You clicked comments')

  const buttons = [
    {
      label: (
        <>
          <FaCommentAlt /> 0 Comments
        </>
      ),
      onClick: onCommentClick,
    },
    {
      label: (
        <>
          <FaThumbsUp /> 242 Likes
        </>
      ),
      onClick: onLikesClick,
    },
    {
      label: (
        <>
          <FaRegEye /> 187288 Views
        </>
      ),
      onClick: onViewsClick,
    },
  ]

  return (
    <StyledRoot>
      <StyledContainer>
        <Card
          title="The Benefits of Green Apples"
          date={date}
          description="Green apples have a high fiber content which helps in increasing the
      body's metabolism. While consuming an apple, make sure that you're not
      tossing the peel in the trash. Consuming apple with its peel improves
      the overall health. Due to its high fiber content, apple helps in
      detoxification process. It keeps the liver and digestive system away
      from harmful elements."
          actions={buttons}
        />
      </StyledContainer>
    </StyledRoot>
  )
}

export default Parent

Son sonuç:

Bonus

Yeni Kart bileşeninizi daha da renklendirmek için, Kartın konusunu görselleştirmeye yardımcı olması için başlığın üzerine bir resim öğesi ekleyebilirsiniz:

const StyledPhoto = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: ${(props) => `1px solid ${props.theme.border.cool}`};
`
const Card = ({
  title,
  date,
  description,
  comments,
  likes,
  views,
  actions,
}) => (
  <StyledContainer>
    <StyledPhoto src="https://s3-us-west-1.amazonaws.com/welcome_apples/posts/1_card/apple.jpg" />
    <Title>{title}</Title>
    <Date>{date}</Date>
    <Description>{description}</Description>
    <Actions>
      {actions.map(({ label }) => (
        <Action>{label}</Action>
      ))}
    </Actions>
  </StyledContainer>
)

Son sonuç:

Mobil cihazlar için nasıl göründüğü aşağıda açıklanmıştır:

Çözüm

Şimdi görebileceğiniz gibi, kart bileşenleri düzenlerin zarif ve temiz görünmesini sağlar. İlgili içeriği bir arada tutmak istediğinizde kart bileşenlerini kullanın ve tam içeriğe bağlanmasını sağlayın. Güzel tasarlanmış bir kart bileşeni, içerik için tıklama almada uzun bir yol kat edebilir 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.