Šiame straipsnyje aprašoma diegimo procedūra, skirta taikyti užvedimą ir kitas būsenas su matomumo ypatybėmis naudojant Tailwind CSS.
Kaip taikyti „Hover“ ir kitas būsenas su matomumo programa „Tailwind“?
Matomumo įrankis gali būti naudojamas užvedus pelės žymeklį ir kitose būsenose, kad naudotojo sąveikos metu būtų atlikti matomumo pakeitimai. Matomumo programoje yra trys klasės, būtent „ matomas “, „ nematomas “ ir „ griūtis “. Toliau pateiktuose pavyzdžiuose integruokime kai kurias matomumo klases su užvedimo būsenomis, kad geriau suprastume.
1 pavyzdys: „Hover“ būsenos taikymas „nematoma“ klasei
Tokiu atveju pasirinktas elementas bus paslėptas, kai vartotojo žymeklis užves virš elemento, kodas rodomas žemiau:
< kūnas >
< div klasė = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasė = 'bg-blue-500 p-3 suapvalintas teksto centras' > 01 < / div >
< div klasė = 'bg-blue-500 p-3 hover: nematomas suapvalintas teksto centras' > 02 < / div >
< div klasė = 'bg-blue-500 p-3 suapvalintas teksto centras' > 03 < / div >
< / div >
< / kūnas >
Aukščiau pateikto kodo paaiškinimas:
- Pirmiausia sukuriamas pirminis div, kuris sukuria trijų stulpelių tinklelio išdėstymą, kuriame yra tarpas tarp kiekvieno stulpelio ir paraštės „ 4 piks “. Naudojant „Tailwind CSS“ tinklelis “, „ tinklelis-stulpeliai-3 “, „ tarpas “, „ mano “ ir „ mx “ klasės atitinkamai.
- Kitas, trys vaikai“ div “ sukuriami elementai ir jiems taikomas pagrindinis stilius.
- Tada ' užveskite pelės žymeklį “ būsena arba parinkiklis CSS priskiriamas antrajam „div“ ir „ nematomas Jai yra priskirtas, atskirtas dvitaškiu : “ ženklas. Dėl to antrasis daliklis tampa nematomas, kai ant jo užvedama pelė.
Tinklalapio peržiūra po vykdymo etapo:
Aukščiau pateiktame gif rodoma, kad antrasis div tampa nematomas užvedus pelę.
2 pavyzdys: Aktyvios būsenos taikymas „nematomoje“ klasėje
Būsena „aktyvi“ taiko stilius, kai vartotojas pasirenka konkretų elementą ir neišeina. Kaip ir teksto laukeliai, kai vartotojas pradeda įvesti duomenis lauke, šiuo metu laukas yra aktyvus. Norėdami geriau suprasti aktyvią būseną ir kaip ji veikia su „nematoma“ klase, apsilankykite toliau pateiktame kode:
< kūnas >< div klasė = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasė = 'bg-blue-500 p-3 suapvalintas teksto centras' >01< / div >
< div klasė = 'bg-blue-500 p-3 aktyvus: nematomas suapvalintas teksto centras' >02< / div >
< div klasė = 'bg-blue-500 p-3 suapvalintas teksto centras' >03< / div >
< / div >
< / kūnas >
Aukščiau pateiktame kode klasė „ nematomas “ yra priskirtas „ aktyvus “ būsena antrajai “ div “ elementą, kad antrasis div elementas būtų paslėptas, kai jis bus pasirinktas.
Po vykdymo tinklalapio peržiūra atrodo taip:
Aukščiau pateikta išvada rodo, kad pasirinkus antrąjį „div“, elementas tampa nematomas.
Išvada
Užvedimas ir kitos būsenos, pvz., aktyvus arba fokusuotas, gali būti naudojamos su klasėmis, kurias teikia matomumo įrankis, norint pakeisti pasirinktų elementų matomumo ypatybes. Norėdami pakeisti elementų matomumą užvedus pelės žymeklį, žymėjimo klasė naudojama kartu su matomumo klasėmis, atskirtomis tokia spalva kaip ' hover:matomas “ arba „ hover:nematomas “. Šiame tinklaraštyje paaiškinta, kaip taikyti užvedimo būsenas naudojant matomumo priemonę.