A CSS számos keretrendszert kínál a programozók számára dinamikus weboldalak tervezésére. Tetszetősebb, mert minden fontos funkciót és eszközt egy helyen biztosít. Tehát nem kell más keretrendszert használnia. A CSS-ben a Tailwind keretrendszer a legszélesebb körben használt, mert időt takarít meg a felhasználónak a túlzott CSS írása során.
Ez az útmutató bemutatja a lebegés, a fókusz és más állapotok használatát a Tailwindben.
Hogyan használjuk a lebegést, a fókuszt és az egyéb állapotokat a Tailwindben?
A weboldalak tervezésénél dinamikus és vonzó elemeket kell hozzáadni a felhasználókkal való interaktivitás fenntartásához. A Tailwind szolgáltatásai interaktív és dinamikus oldalak létrehozására használhatók további egyéni CSS írása nélkül. Egyes funkciók „lebegés”, „fókusz” és „aktív”, amelyek segítenek vonzóvá tenni a terveket.
A Hover Variant használata HTML-ben
A hover tulajdonság egy HTML-elem stílusának meghatározására szolgál, amikor a felhasználó az egérmutatót egy adott elem fölé viszi. Segíti a gördülékeny élmény bemutatását.
1. lépés: Alkalmazza a „hover” tulajdonságot a HTML-ben
Hozzon létre egy HTML-fájlt, és alkalmazza a hover tulajdonságot a kód valamely elemére. Ha ötletet szeretne, nézze meg az alábbi kódot:
< test >
< div osztály = 'központ' >
< gomb osztály = 'bg-green-500 hover:bg-blue-500 text-white font-bold lekerekített' >
Hover Me!
< / gomb >
< / div >
< / test >
Ebben a kódban:
- Egy '' nevű gomb Hover Me! ” a gombcímke hozza létre.
- ' bg-green-500 ” zöldre állítja a gomb háttérszínét.
- ' lebeg: bg-blue-500 ” megváltoztatja a gomb színét zöldről kékre, ha az egeret fölé viszi.
- A gomb szövege fehér színű ' szöveg-fehér ” és „ font-félkövér ” félkövérré teszi a betűtípust.
- A gomb alakját kerekre állítja a „ lekerekített ”.
2. lépés: Tekintse meg a kimenet előnézetét
A fenti kód végrehajtása után a végső nézet így néz ki:
Látható, hogy a gomb színe megváltozik, ha az egérkurzort fölé viszi.
A Focus Variant használata HTML-ben
A fókusz tulajdonság a HTML-elemek stílusának meghatározására szolgál úgy, hogy amikor a felhasználó rákattint az elemre, az kiemelésre kerül, hogy felhívja a felhasználó figyelmét.
1. lépés: Alkalmazza a Fókusz tulajdonságot a HTML-kódban
Hozzon létre egy HTML-fájlt, és alkalmazza a fókusz tulajdonságot valamelyik kívánt elemre. A benyomás eléréséhez vegye figyelembe az alábbi kódot:
< div >
< / div >
< / test >
Ebben a kódban:
- A ' Flex ” osztály flexet hoz létre.
- A ' justify-center ” indokolja a tartalom középre igazítását.
- A ' tételek központja ” osztály a képernyő közepére állítja az objektumokat.
- A ' h-képernyő ” beállítja a képernyő méretét a nézetablaknak megfelelően.
- ' bg-blue-200 ” a háttérszínt kékre állítja.
- Létrejön egy szöveg típusú beviteli mező.
- A ' fókusz: bg-green-300 ” megváltoztatja a beviteli mező színét zöldre, amikor a felhasználó rákattint.
- ' w-64 ” a szélességet 64 képpontra állítja.
- ' h-10 ” a magasságot 10 képpontra állítja.
- ' px-4 ” 4 képpontos párnázást ad a felső és a bal oldalon.
- ' py-2 ” 2 képpontos párnázást ad a tetejére és aljára.
2. lépés: Tekintse meg a Fókusz tulajdonság előnézetét
Mentse el a HTML kódot, és nyissa meg az általa létrehozott weboldalt. Ezután mozgassa a kurzort a beviteli mezőre, és kattintson rá, és az alábbi változás történik:
Az aktív változat használata a HTML-ben
Ezt a tulajdonságot arra használják, hogy stílusozzák az elemeket ahhoz a feltételhez, amikor a felhasználó dinamikusan megérinti az elemet. Az aktív állapot a kurzor aktiválási szakaszától és feloldott állapotától eltelt idő.
Szintaxis
aktív: { ingatlan }Az adott CSS-tulajdonság alkalmazásra kerül a kiválasztott elemre.
1. lépés: Alkalmazza az aktív változatot a HTML-kódban
Hozzon létre egy HTML-fájlt, és alkalmazza az aktív tulajdonságot néhány elemre, amely az alábbi esetben egy gomb:
< div osztály = 'flex justify-center items-center h-screen' >
< gomb osztály = 'bg-green-600 p-4 kerekített-md átmeneti-transzformációs időtartam-400 transzformáció aktív:skála-110' >
Kattints ide!
< / gomb >
< / div >
< / test >
Ebben a kódban:
- ' bg-green-600 ” zöldre állítja a háttérszínt.
- ' p-4 ” ad hozzá egy 4 képpontos kitöltést.
- ' lekerekített-md ” lekerekítetté teszi a gomb formáját.
- ' átmenet-átalakítás ” a gomb rövid időtartamra történő átalakítására szolgál, amelyet a „ időtartam-400 transzformáció ”.
- A ' aktív:skála-110 ” a gombot nagyobb méretre alakítja.
2. lépés: Tekintse meg a kimenet előnézetét
Mentse el a fenti kódot HTML-fájlba, és tekintse meg az általa létrehozott weboldal előnézetét. A weboldal így fog kinézni:
Látható, hogy a gomb mérete megnövekszik, ha az egeret tartja, és amint elengedi, visszatér eredeti állapotába.
Következtetés
A lebegés, a fókusz és más állapotok használatához a Tailwindben használja az előre meghatározott állapotosztályokat, például a „hover”-t, és alkalmazzon rá néhány stílustulajdonságot, mint például a szín megváltoztatása, a fókuszgyűrű létrehozása stb. A megjelenítő segédprogramok méretezhető kimenet megjelenítésére szolgálnak. Ez az írás bemutatta a lebegés, fókusz és egyéb állapotok használatának módszerét a Tailwindben.