Painikkeiden muunnelmat ja tilat

Painikkeet ovat sivun interaktiivisimpia elementtejä, ja käyttäjät luottavat visuaalisiin vihjeisiin ymmärtääkseen niiden tarkoituksen. Painikevariaatiot ilmaisevat toiminnon merkityksen: ensisijainen painike käynnistää päätoiminnon, toissijainen painike tarjoaa vaihtoehdon ja outline- tai ghost-painike tarjoaa hienovaraisemman vaihtoehdon.

Tailwindin avulla toteutat kaikki nämä kirjoittamatta mukautettua CSS:ää. Kukin variaatio on vain erilainen yhdistelmä apuluokkia, joita käytetään samassa <button>-elementissä.

Ensisijainen painike käyttää yksiväristä taustaa saadakseen mahdollisimman paljon huomiota. Rakenne yhdistää täytteen apuluokat, taustavärin, valkoisen tekstin ja pyöristettyjen kulmien luokan.

hover:bg-blue-700 tummentaa painiketta hiiren osoittimen ollessa sen päällä ja antaa selkeän palautteen elementin interaktiivisuudesta. font-semibold-luokka lisää tekstin visuaalista painokkuutta.

Toissijainen painike käyttää vaaleampaa taustaa ilmaistakseen vähemmän korostettua toimintoa. Outline-painike poistaa täytteen kokonaan ja näyttää vain reunuksen käyttämällä läpinäkyvällä taustalla luokkia border border-blue-600 text-blue-600.

Hover-tilassa outline-painikkeen voi täyttää vaalealla taustalla, kuten hover:bg-blue-50-luokalla. Näin saat visuaalista palautetta ilman, että lähellä olevaa ensisijaista painiketta korostetaan liikaa.

Ghost-painikkeella ei oletusarvoisesti ole taustaa eikä näkyvää reunusta, joten se näyttää muotoillulta tekstiltä, kunnes käyttäjä on vuorovaikutuksessa sen kanssa. Tämä variaatio sopii hyvin vähän korostusta vaativiin toimintoihin, kuten peruuttamiseen tai sulkemiseen.

hover:bg-gray-100 tuo hover-tilassa näkyviin hienovaraisen täytteen, ja text-gray-700 pitää tekstin luettavana viemättä huomiota ensisijaisilta toiminnoilta.

Tuhoava painike käyttää punaisia sävyjä varoittamaan käyttäjää peruuttamattomista toiminnoista, kuten tietojen poistamisesta. Väri ilmaisee vaaran ilman, että käyttäjän tarvitsee lukea tekstiä tarkasti.

Yhdistä bg-red-600 vahvaan hover-tilaan hover:bg-red-700 ja yhdistä painikkeeseen aina vahvistusikkuna tahattomien toimintojen estämiseksi.

Kun painike ei ole vielä käytettävissä — esimerkiksi lomakkeen lähetyksen aikana — tästä tulisi ilmoittaa visuaalisesti käytöstä poistetulla tilalla. Tailwind tarjoaa tähän tarkoitukseen disabled:-variaation etuliitteen.

Käytä luokkia disabled:opacity-50 disabled:cursor-not-allowed himmentämään painiketta ja muuttamaan osoitinta. Näin käyttäjälle ilmoitetaan, ettei painiketta voi napsauttaa. Käytä näiden luokkien kanssa aina myös HTML:n disabled-attribuuttia asianmukaisen saavutettavuuden varmistamiseksi.

Yleinen ratkaisu on näyttää painikkeen sisällä latausympyrä, kun asynkroninen toiminto suoritetaan loppuun. Voit käyttää SVG-kuvakkeessa ennen tekstiä Tailwindin animate-spin-luokkaa.

Käytä painikkeessa luokkia inline-flex items-center gap-2 latausympyrän ja tekstin kohdistamiseen vierekkäin. Lisää latauksen ajaksi myös pointer-events-none estämään lähetyksen toistuminen.

Eri tilanteet edellyttävät erikokoisia painikkeita. Pieni painike sopii tiiviisiin käyttöliittymiin, kuten taulukoihin, kun taas erittäin suuri painike toimii tehokkaana päätoimintakehotteena.

Määritä koot muuttamalla arvoja px-*, py-* ja text-*. Yleinen asteikko on sm (px-3 py-1.5 text-sm), md (px-5 py-2.5 text-base) ja lg (px-6 py-3 text-lg).

Kuvakepainikkeissa käytetään vain kuvaketta ilman näkyvää tekstiä, joten niillä on oltava saavutettava aria-label-attribuutti. Muotoile painike neliöksi käyttämällä yhtä suurta täytettä joka puolella: p-2 luo kuvakkeen ympärille tiiviin napsautettavan alueen.

Kuvake–teksti-painikkeissa käytä luokkia inline-flex items-center gap-2 SVG-kuvakkeen kohdistamiseen pystysuunnassa tekstin kanssa fonttikoosta riippumatta.

Täysleveä painike käyttää w-full-luokkaa levitäkseen säilönsä koko leveydelle. Tämä on yleistä mobiiliasetteluissa ja lomakkeiden lähetyksissä. justify-center varmistaa, että teksti pysyy keskitettynä.

Painikeryhmä yhdistää useita painikkeita vierekkäin. Poista keskimmäisten painikkeiden reunojen pyöristys ja yhdistä reunukset negatiivisilla marginaaleilla: first:rounded-l-lg last:rounded-r-lg border-r-0 luo yhtenäisen kapselimaisen ulkoasun.

Jokainen painikevariaatio tarvitsee näkyvän kohdistusilmaisimen näppäimistöä käyttäville. Tailwindin focus:ring-*-apuohjelmat piirtävät painikkeen reunuksen ulkopuolelle värillisen renkaan vaikuttamatta asetteluun.

Hyvä rakenne on focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2. ring-offset-2 lisää painikkeen ja renkaan väliin pienen valkoisen välin, mikä erottaa renkaan värillisestä taustasta. Käytä focus-visible:ring-2-luokkaa, jos haluat näyttää renkaan vain näppäimistöllä navigoitaessa.

Tässä oppitunnissa opit, että ensisijaiset, toissijaiset, outline- ja ghost-painikevariaatiot rakennetaan yhdistämällä tausta-, reunus- ja tekstiväriapuohjelmia; interaktiiviset tilat, kuten hover, aktiivinen, käytöstä poistettu ja lataus, käsitellään Tailwindin variaatioiden etuliitteillä; ja kohdistusrenkaat, joissa käytetään focus-visible:ring-2-luokkaa, varmistavat näppäimistösaavutettavuuden häiritsemättä hiirellä tapahtuvaa käyttöä. Seuraavaksi tutustumme korttikomponenttien rakenteisiin.