Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Painikkeiden Luominen ja Tyylittely | Peruskomponenttien Rakentaminen
Tailwind CSS Verkkokehitykseen

bookPainikkeiden Luominen ja Tyylittely

Painikkeet ovat keskeisiä vuorovaikutteisia elementtejä verkkosuunnittelussa. Tailwind CSS tarjoaa monipuoliset työkalut painikkeiden tehokkaaseen tyylittelyyn sekä niiden eri tilojen, kuten hover-, focus- ja active-tilojen hallintaan.

Peruspainikkeen tyylittely

Peruspainikkeen tyylittelyyn voidaan käyttää apuluokkia taustavärille, tekstin värille, täytteelle, reunojen pyöristykselle ja fontin paksuudelle.

index.html

index.html

copy

Selitys

  1. bg-yellow-500: Asettaa taustavärin sinisen sävyyn;
  2. text-white: Asettaa tekstin värin valkoiseksi;
  3. font-bold: Tekee tekstistä lihavoidun;
  4. py-2: Lisää pystysuoraa täytettä (0,5rem tai 8px);
  5. px-4: Lisää vaakasuoraa täytettä (1rem tai 16px);
  6. rounded: Lisää pienet pyöristetyt kulmat.

Hover-tila

Voit muuttaa painikkeen ulkoasua, kun käyttäjä vie hiiren sen päälle, käyttämällä hover:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

hover:bg-blue-700: Muuttaa taustavärin tummansiniseksi, kun painiketta leijutetaan hiirellä.

Kohdistustila

Painikkeen tyylin määrittelyä kohdistettuna (esim. kun se valitaan näppäimistöllä) varten voidaan käyttää focus:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

Tässä esimerkissä, kun viet hiiren osoittimen painikkeen päälle, se muuttuu siniseksi. Jos käytät Tab-näppäintä, painike muuttuu punaiseksi.

Aktiiviset ja poistetut tilat

Aktiivisia ja poissa käytöstä olevia tiloja käytetään harvemmin. Ne on kuitenkin hyvä ottaa huomioon.

Voit muotoilla painiketta sen ollessa aktiivinen (esim. kun sitä klikataan) käyttämällä active:-etuliitettä minkä tahansa apuluokan kanssa.

Voit muotoilla painiketta sen ollessa poissa käytöstä (esim. kun siihen ei voi vaikuttaa) käyttämällä disabled:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

Selitys

  1. active:bg-green-800: Muuttaa taustavärin tummemmaksi vihreäksi, kun painike on aktiivinen (painettuna);
  2. opacity-50: Vähentää painikkeen läpinäkyvyyttä, jolloin se näyttää poistetulta käytöstä;
  3. cursor-not-allowed: Muuttaa osoittimen osoittamaan, että painiketta ei voi klikata;
  4. disabled attribuutti: Tekee painikkeesta ei-interaktiivisen.

Esimerkki kaikista tiloista

Kaikkien tilojen yhdistäminen yhteen esimerkkiin

index.html

index.html

copy

Selitys

  1. bg-blue-500: Asettaa oletustaustavärin;
  2. hover:bg-blue-700: Muuttaa taustavärin, kun hiiri on painikkeen päällä;
  3. focus:outline-none: Poistaa oletuskorostuksen painikkeen ollessa valittuna;
  4. focus:ring-2: Lisää 2 pikselin levyisen korostuskehän painikkeen ympärille;
  5. focus:ring-blue-600: Asettaa korostuskehän värin;
  6. focus:ring-opacity-50: Asettaa korostuskehän läpinäkyvyyden;
  7. active:bg-blue-800: Muuttaa taustavärin, kun painiketta painetaan;
  8. text-white: Asettaa tekstin värin valkoiseksi;
  9. font-bold: Tekee tekstistä lihavoidun;
  10. py-2: Lisää pystysuoran täytteen;
  11. px-4: Lisää vaakasuoran täytteen;
  12. rounded: Lisää pienet pyöristetyt kulmat.

Huomio

Jos haluat perehtyä tarkemmin Tailwind Button -komponenttiin, tässä on linkki viralliseen dokumentaatioon.

1. Miten muutat painikkeen taustavärin, kun hiiri on sen päällä?

2. Mikä utiliteettiluokka poistaa painikkeen oletusarvoisen fokuskehän?

3. Mikä utiliteettiluokka muuttaa painikkeen taustavärin, kun se on aktiivinen (painettuna)?

question mark

Miten muutat painikkeen taustavärin, kun hiiri on sen päällä?

Select the correct answer

question mark

Mikä utiliteettiluokka poistaa painikkeen oletusarvoisen fokuskehän?

Select the correct answer

question mark

Mikä utiliteettiluokka muuttaa painikkeen taustavärin, kun se on aktiivinen (painettuna)?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 1

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookPainikkeiden Luominen ja Tyylittely

Pyyhkäise näyttääksesi valikon

Painikkeet ovat keskeisiä vuorovaikutteisia elementtejä verkkosuunnittelussa. Tailwind CSS tarjoaa monipuoliset työkalut painikkeiden tehokkaaseen tyylittelyyn sekä niiden eri tilojen, kuten hover-, focus- ja active-tilojen hallintaan.

Peruspainikkeen tyylittely

Peruspainikkeen tyylittelyyn voidaan käyttää apuluokkia taustavärille, tekstin värille, täytteelle, reunojen pyöristykselle ja fontin paksuudelle.

index.html

index.html

copy

Selitys

  1. bg-yellow-500: Asettaa taustavärin sinisen sävyyn;
  2. text-white: Asettaa tekstin värin valkoiseksi;
  3. font-bold: Tekee tekstistä lihavoidun;
  4. py-2: Lisää pystysuoraa täytettä (0,5rem tai 8px);
  5. px-4: Lisää vaakasuoraa täytettä (1rem tai 16px);
  6. rounded: Lisää pienet pyöristetyt kulmat.

Hover-tila

Voit muuttaa painikkeen ulkoasua, kun käyttäjä vie hiiren sen päälle, käyttämällä hover:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

hover:bg-blue-700: Muuttaa taustavärin tummansiniseksi, kun painiketta leijutetaan hiirellä.

Kohdistustila

Painikkeen tyylin määrittelyä kohdistettuna (esim. kun se valitaan näppäimistöllä) varten voidaan käyttää focus:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

Tässä esimerkissä, kun viet hiiren osoittimen painikkeen päälle, se muuttuu siniseksi. Jos käytät Tab-näppäintä, painike muuttuu punaiseksi.

Aktiiviset ja poistetut tilat

Aktiivisia ja poissa käytöstä olevia tiloja käytetään harvemmin. Ne on kuitenkin hyvä ottaa huomioon.

Voit muotoilla painiketta sen ollessa aktiivinen (esim. kun sitä klikataan) käyttämällä active:-etuliitettä minkä tahansa apuluokan kanssa.

Voit muotoilla painiketta sen ollessa poissa käytöstä (esim. kun siihen ei voi vaikuttaa) käyttämällä disabled:-etuliitettä minkä tahansa apuluokan kanssa.

index.html

index.html

copy

Selitys

  1. active:bg-green-800: Muuttaa taustavärin tummemmaksi vihreäksi, kun painike on aktiivinen (painettuna);
  2. opacity-50: Vähentää painikkeen läpinäkyvyyttä, jolloin se näyttää poistetulta käytöstä;
  3. cursor-not-allowed: Muuttaa osoittimen osoittamaan, että painiketta ei voi klikata;
  4. disabled attribuutti: Tekee painikkeesta ei-interaktiivisen.

Esimerkki kaikista tiloista

Kaikkien tilojen yhdistäminen yhteen esimerkkiin

index.html

index.html

copy

Selitys

  1. bg-blue-500: Asettaa oletustaustavärin;
  2. hover:bg-blue-700: Muuttaa taustavärin, kun hiiri on painikkeen päällä;
  3. focus:outline-none: Poistaa oletuskorostuksen painikkeen ollessa valittuna;
  4. focus:ring-2: Lisää 2 pikselin levyisen korostuskehän painikkeen ympärille;
  5. focus:ring-blue-600: Asettaa korostuskehän värin;
  6. focus:ring-opacity-50: Asettaa korostuskehän läpinäkyvyyden;
  7. active:bg-blue-800: Muuttaa taustavärin, kun painiketta painetaan;
  8. text-white: Asettaa tekstin värin valkoiseksi;
  9. font-bold: Tekee tekstistä lihavoidun;
  10. py-2: Lisää pystysuoran täytteen;
  11. px-4: Lisää vaakasuoran täytteen;
  12. rounded: Lisää pienet pyöristetyt kulmat.

Huomio

Jos haluat perehtyä tarkemmin Tailwind Button -komponenttiin, tässä on linkki viralliseen dokumentaatioon.

1. Miten muutat painikkeen taustavärin, kun hiiri on sen päällä?

2. Mikä utiliteettiluokka poistaa painikkeen oletusarvoisen fokuskehän?

3. Mikä utiliteettiluokka muuttaa painikkeen taustavärin, kun se on aktiivinen (painettuna)?

question mark

Miten muutat painikkeen taustavärin, kun hiiri on sen päällä?

Select the correct answer

question mark

Mikä utiliteettiluokka poistaa painikkeen oletusarvoisen fokuskehän?

Select the correct answer

question mark

Mikä utiliteettiluokka muuttaa painikkeen taustavärin, kun se on aktiivinen (painettuna)?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 1
some-alt