Korttikomponenttien Luominen

Käyttöliittymiä rakennettaessa korttikomponentit ovat suosittu tapa ryhmitellä toisiinsa liittyvää sisältöä visuaalisesti. Kortit auttavat järjestämään tietoa helposti hahmotettaviin lohkoihin, mikä tekee asetteluista helpommin silmäiltäviä ja käytettäviä. Tailwind CSS:n avulla voit rakentaa korttikomponentteja nopeasti hyödyntämällä apuluokkia esimerkiksi välistyksiin, taustaväreihin, reunoihin ja varjoihin suoraan React JSX:ssä.

Tyypillinen korttirakenne sisältää kolme pääosaa: otsikon, rungon ja alatunnisteen. Otsikossa on usein otsikko tai kuva, rungossa varsinainen sisältö ja alatunnisteessa esimerkiksi painikkeita tai linkkejä. Visuaalisesti miellyttävän kortin luomiseen voit käyttää Tailwindin p-*-luokkia sisäisiin väleihin, bg-* taustaväriin, rounded-* reunojen pyöristykseen ja shadow-* syvyyden luomiseen. Näillä luokilla hallitset kortin ulkoasua ilman omaa CSS-koodia.

Esimerkiksi kortin aloitukseen voit käyttää bg-white puhtaaseen taustaan, rounded-lg pehmeisiin kulmiin ja shadow-md tuomaan kortti esiin sivulta. Kortin osien välistä tilaa hallitaan p-4- tai mb-2-luokilla, ja tekstiä voi muotoilla esimerkiksi font-bold- tai text-gray-700-luokilla.

Käydään läpi yksinkertaisen Card-komponentin luominen Reactissa. Aloita määrittelemällä funktiokomponentti. Palautettavassa JSX:ssä rakenna kortti sisältävä div, johon lisäät keskeiset Tailwind-luokat asetteluun, taustaan, reunojen pyöristykseen ja varjoon. Lisää seuraavaksi lapsi-divit otsikolle, rungolle ja alatunnisteelle, jokaiselle omat välistys- ja fonttiluokat. Otsikossa voit käyttää esimerkiksi text-xl ja font-semibold, rungossa text-base ja text-gray-700, ja alatunnisteessa flex-asettelua toimintopainikkeille tai linkeille.

Näin voit jäsentää korttikomponentin JSX:n:

function Card({ title, content, footer }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 max-w-sm">
      <div className="mb-4 text-xl font-semibold">{title}</div>
      <div className="mb-6 text-base text-gray-700">{content}</div>
      <div className="flex justify-end space-x-2">{footer}</div>
    </div>
  );
}

Tässä esimerkissä bg-white määrittää taustan, rounded-lg lisää suuret pyöristetyt kulmat, shadow-md antaa keskikokoisen varjon ja p-6 lisää sisäistä väliä koko korttiin. Otsikossa käytetään mb-4 erottamaan se rungosta, ja alatunnisteessa flex-apuluokkia toimintojen oikeaan reunaan kohdistamiseen. Voit mukauttaa näitä luokkia suunnittelusi mukaan säätämällä esimerkiksi välejä, varjon voimakkuutta tai taustaväriä.

Hyödyntämällä Tailwindin apuluokkia voit nopeasti koota ja muokata korttiasetteluja, mikä takaa yhtenäisyyden ja responsiivisuuden koko sovelluksessa.