Ez a cikk bemutatja a lebegés, a fókusz és más helyzettulajdonságokkal rendelkező állapotok használatát a Tailwindben.
Hogyan használhatjuk a lebegést, a fókuszt és az egyéb állapotokat a pozíciótulajdonsággal a Tailwindben?
A Tailwind lebegő, fókusz és egyéb állapotai a Tailwind elemeinek stílusosítására szolgálnak, vonzó és felhasználóbarát felületet és vonzó élményt nyújtva a felhasználók számára. Néha a pozíció tulajdonságot kell alkalmazni, hogy a tapasztalat a legmagasabb színvonalon maradjon.
1. módszer: Lebegtetési változat használata a pozíció tulajdonsággal
A lebegtető változat a kiválasztott elemek stílusának meghatározására szolgál, amikor a felhasználó a kurzort a kiválasztott elem fölé viszi. A ' pozíció ' attribútum használható a '' elemmel együtt lebeg ” a lebegés előtti és utáni pozíció beállításához. Ez a pár arra szolgál, hogy vonzó élményt teremtsen a felhasználó számára.
1. lépés: Adja hozzá a Hover Property-t a Pozícióval a HTML-ben
Az alábbi kódban a hover tulajdonság a pozíció tulajdonság mentén kerül alkalmazásra a ' gomb ” elem:
< test >
< gomb osztály = 'relatív w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4' >
< p osztály = 'text-white text-center' > Hover Me < / p >
< / gomb >
< / test >
Ebben a kódban:
- A ' relatív ” osztály a szülőoldalhoz viszonyítva állítja be a gombot.
- ' w-40 ” a szélességet 40 képpontra állítja.
- ' h-12 ” a magasságot 12 képpontra állítja.
- ' bg-blue-500 ” a háttérszínt kékre állítja.
- ' lebeg: abszolút ” megváltoztatja a gomb relatív helyzetét abszolút értékre, amikor az egérkurzort fölé viszi.
- ' hover: translate-x-4 ” mozgatja a gombot 4 képponttal jobbra az x tengelyen, és egyidejűleg 4 képponttal lefelé a „ hover: translate-y-4 ”.
- A szöveg középre igazítva: ' szövegközpont ”.
2. lépés: Ellenőrzés
Tekintse meg a fenti kóddal létrehozott weboldal előnézetét, amely így néz ki:
A kimenet azt mutatja, hogy az elemet 4 képponttal jobbra és lefelé mozdították el.
2. módszer: Fókuszváltozat használata Pozíció tulajdonsággal
A fókuszváltozatot a HTML-elemek stílusosítására használják, hogy felhívják a felhasználó figyelmét, és bizonyos elemeket kiemeljenek. A pozíció együtt is alkalmazható az objektum relatív vagy abszolút elhelyezésére a szülőoldalhoz képest. Ez azért történik, hogy a felhasználó elkötelezett maradjon.
1. lépés: Adja hozzá a Fókusz tulajdonságot a pozícióval a HTML-ben
Hozzon létre egy HTML-fájlt, és alkalmazza a fókusz tulajdonságot megfelelő pozícióval. Például a relatív pozíció egy beviteli mezőre vonatkozik az alábbi kódban:
< / test >
Ebben a kódban:
- Állítsa be a „ bemenet ' elemeket ' relatív ”.
- ' fókusz: lefordítás-x-4 ” mozgatja a gombot 4 képponttal jobbra az x tengelyen, és egyidejűleg 4 képponttal lefelé a „ fókusz: lefordítás-y-4 ” amikor a felhasználó a beviteli mezőre kattint.
- ' fókusz: körvonal-2 ” körvonalat hoz létre a szövegmező körül, amikor a felhasználó rákattint.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a kóddal létrehozott weboldal előnézetét, hogy észrevegye a változást:
A fenti kimenet azt mutatja, hogy a stílust alkalmazták a kiválasztott elemre, amikor az fókuszba kerül.
Aktív változat használata Pozíció tulajdonsággal.
Az aktív változat a HTML elemek stílusának meghatározására szolgál, hogy meghatározza azt az állapotot, amikor a felhasználó rákattint és lenyomva tart egy gombot vagy más elemet. A pozíció tulajdonság vonzóbbá teheti a kimenetet a felhasználók számára, dinamikusabb élményt teremtve.
1. lépés: Adja hozzá a Hover Property-t a Pozícióval a HTML-ben
Hozzon létre egy HTML-fájlt, és alkalmazza az aktív változatot a pozíció tulajdonsággal együtt. Például ezek a tulajdonságok egy gombra vonatkoznak az alábbi kódpéldában:
< gomb osztály = 'relatív w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< span osztály = 'text-white' >Kattintson rám< / span >
< / gomb >
< / test >
A fenti kódban:
- Állítsa be a „ gomb ' elemet ' relatív ”.
- ' bg-blue-500 ” a gomb háttérszínét kékre állítja.
- ' aktív: translate-y-2 ” 2 képponttal lefelé mozgatja a gombot, és zöldre változtatja a gomb színét a „ aktív: bg-green-400 ”.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a fenti kóddal létrehozott weboldal előnézetét, majd kattintson és tartsa lenyomva a gombot a változás megtekintéséhez:
A fenti gif azt mutatja, hogy a kiválasztott gombelem stílusa megváltozik, amikor aktívvá válik.
Ez minden, hogy alkalmazza a lebegést, a fókuszt és más, pozíció tulajdonsággal rendelkező állapotokat a Tailwindben.
Következtetés
A lebegés, a fókusz és más állapotok használhatók a pozíció tulajdonsággal, az előre meghatározott lebegés, fókusz és egyéb állapotok osztályaival, majd pozícióosztály attribútumok alkalmazásával, mint pl. abszolút ', ' relatív ” és így tovább együtt. Ez a blog bemutatja, hogyan kell használni a lebegést, a fókuszt és más állapotokat a poziciós segédprogrammal a Tailwindben.