Tämä artikkeli havainnollistaa hover-, fokus- ja muiden sijaintiominaisuuksien tilojen käyttöä Tailwindissä.
Kuinka käyttää Hover-, Focus- ja muita tiloja sijaintiominaisuuden kanssa Tailwindissä?
Tailwindin hover-, fokus- ja muita tiloja käytetään Tailwindin elementtien tyylistämiseen, mikä tarjoaa houkuttelevan ja käyttäjäystävällisen käyttöliittymän ja mukaansatempaavan käyttökokemuksen. Joskus asemaominaisuutta tulee soveltaa kokemuksen säilyttämiseksi korkeimmillaan.
Tapa 1: Hover-vaihtoehdon käyttäminen sijaintiominaisuuden kanssa
Hover-muunnelmaa käytetään valittujen elementtien tyyliin, kun käyttäjä siirtää kohdistimen valitun elementin päälle. ' asema ' attribuuttia voidaan käyttää yhdessä ' leijuu ” asettaaksesi sijainnin ennen ja jälkeen housun. Tätä paria käytetään luomaan käyttäjälle mukaansatempaava kokemus.
Vaihe 1: Lisää Hover-ominaisuus ja sijainti HTML:ssä
Alla olevassa koodissa hover-ominaisuutta käytetään sijaintiominaisuuden yhteydessä ' -painiketta ”elementti:
< kehon >
< -painiketta luokkaa = 'suhteellinen w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4' >
< s luokkaa = 'teksti-valkoinen tekstikeskus' > Hover Me < / s >
< / -painiketta >
< / kehon >
Tässä koodissa:
- ' suhteellinen ” luokka asettaa painikkeen suhteessa pääsivuun.
- ' w-40 ” asettaa leveydeksi 40 pikseliä.
- ' h-12 ” asettaa korkeudeksi 12 kuvapistettä.
- ' bg-blue-500 ” asettaa taustavärin siniseksi.
- ' leijua: ehdoton ” muuttaa painikkeen suhteellisen sijainnin absoluuttiseksi, kun hiiren osoitin liikkuu sen päällä.
- ' hover: translate-x-4 ' siirtää painiketta 4px oikealle x-akselilla ja samalla 4px alaspäin ' hover: translate-y-4 ”.
- Teksti on tasattu keskelle ' tekstikeskus ”.
Vaihe 2: Vahvistus
Esikatsele yllä olevalla koodilla luotua verkkosivua, joka näyttää tältä:
Tulos näyttää, että elementtiä on siirretty oikealle ja alaspäin 4 pikseliä.
Tapa 2: Tarkennusvaihtoehdon käyttäminen sijaintiominaisuuden kanssa
Fokusmuunnelmaa käytetään tyylistämään HTML-elementtejä käyttäjän huomion saamiseksi ja joidenkin elementtien korostamiseksi. Sijaintia voidaan käyttää myös yhdessä kohteen sijoittamiseksi suhteessa tai absoluuttisesti pääsivuun. Se tehdään, jotta käyttäjä pysyy aktiivisena.
Vaihe 1: Lisää HTML-koodiin kohdistusominaisuus ja sijainti
Luo HTML-tiedosto ja käytä kohdistusominaisuutta sopivaan paikkaan. Esimerkiksi suhteellista sijaintia käytetään alla olevan koodin syöttöruutuun:
< / kehon >
Tässä koodissa:
- Aseta ' syöttö ' elementtejä kohtaan ' suhteellinen ”.
- ' tarkennus: translate-x-4 ' siirtää painiketta 4px oikealle x-akselilla ja samalla 4px alaspäin ' tarkennus: translate-y-4 ', kun käyttäjä napsauttaa syöttöruutua.
- ' painopiste: outline-2 ” luo ääriviivat tekstiruudun ympärille, kun käyttäjä napsauttaa sitä.
Vaihe 2: Tarkista lähtö
Esikatsele koodilla luotua verkkosivua huomataksesi muutoksen:
Yllä oleva tulos näyttää, että tyyliä on käytetty valittuun elementtiin, kun se tarkennetaan.
Aktiivisen muunnelman käyttäminen sijaintiominaisuuden kanssa.
Aktiivista varianttia käytetään HTML-elementtien tyyliin määrittelemään tila, kun käyttäjä napsauttaa ja pitää painettuna painiketta tai jotain muuta elementtiä. Sijaintiominaisuus voi tehdä lähdöstä houkuttelevamman käyttäjille luoden dynaamisemman käyttökokemuksen.
Vaihe 1: Lisää Hover-ominaisuus ja sijainti HTML:ssä
Luo HTML-tiedosto ja käytä aktiivista muunnelmaa sijaintiominaisuuden yhteydessä. Näitä ominaisuuksia sovelletaan esimerkiksi painikkeeseen alla olevassa koodiesimerkissä:
< -painiketta luokkaa = 'suhteellinen w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< jänneväli luokkaa = 'teksti-valkoinen' >Napsauta minua< / jänneväli >
< / -painiketta >
< / kehon >
Yllä olevassa koodissa:
- Aseta ' -painiketta ' elementti '' suhteellinen ”.
- ' bg-blue-500 ” asettaa painikkeen taustavärin siniseksi.
- ' aktiivinen: translate-y-2 ' siirtää painiketta 2px alaspäin ja muuttaa painikkeen värin vihreäksi ' aktiivinen: bg-green-400 ”.
Vaihe 2: Tarkista lähtö
Esikatsele yllä olevalla koodilla luotua verkkosivua ja napsauta ja pidä painiketta painettuna nähdäksesi muutoksen:
Yllä oleva gif näyttää, että valitun painikeelementin tyyli muuttuu, kun se tulee aktiiviseksi.
Tämä riittää hover-, fokus- ja muiden tilojen soveltamiseen, joilla on sijaintiominaisuus Tailwindissä.
Johtopäätös
Hover-, focus- ja muita tiloja voidaan käyttää sijaintiominaisuuden kanssa käyttämällä ennalta määritettyjä hover-, focus- ja muiden tilojen luokkia ja käyttämällä sitten sijaintiluokkaattribuutteja, kuten ' ehdoton ', ' suhteellinen ” ja niin edelleen yhdessä. Tämä blogi on osoittanut, kuinka hiiri-, fokus- ja muita tiloja käytetään sijaintiapuohjelmalla Tailwindissä.