Šajā rakstā ir aprakstīta ieviešanas procedūra, lai lietotu kursoru un citus stāvokļus ar redzamības īpašībām, izmantojot Tailwind CSS.
Kā Tailwind lietotnē Hover un citas valstis ar redzamības utilītu?
Redzamības utilītu var izmantot, novietojot kursoru un citus stāvokļus, lai veiktu redzamības izmaiņas lietotāja mijiedarbībā. Redzamības utilītprogrammā ir trīs klases, proti ' redzams ”, “ neredzams ', un ' sabrukt ”. Lai labāk izprastu, tālāk sniegtajos piemēros integrēsim dažas redzamības klases ar kursora novietošanas stāvokļiem.
1. piemērs: Lidmašīnas stāvokļa izmantošana “neredzamajā” klasē
Šādā gadījumā atlasītais elements tiks paslēpts, kad lietotāja kursors novieto virs elementa, kods tiek parādīts zemāk:
< ķermeni >
< div klasē = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasē = 'bg-blue-500 p-3 noapaļots teksta centrs' > 01 < / div >
< div klasē = 'bg-blue-500 p-3 hover:neredzams noapaļots teksta centrs' > 02 < / div >
< div klasē = 'bg-blue-500 p-3 noapaļots teksta centrs' > 03 < / div >
< / div >
< / ķermeni >
Iepriekš minētā koda skaidrojums:
- Pirmkārt, tiek izveidots vecākais div, kas izveido trīs kolonnu režģa izkārtojumu ar atstarpi starp katru kolonnu un malu ' 4 pikseļi ”. Izmantojot Tailwind CSS ' režģis ”, “ režģis-kolas-3 ”, “ plaisa ”, “ mans ', un ' mx ” klases attiecīgi.
- Nākamais, trīs bērni' div ” elementi tiek izveidoti un tiem tiek piemērots pamata stils.
- Pēc tam ' novietojiet kursoru ” stāvoklis vai atlasītājs CSS ir piešķirts otrajam “div” un “ neredzams “ ir piešķirts tam, atdalot ar kolu “ : ” zīme. Tas padara otro div neredzamu, kad pele tiek novietota virs tā.
Tīmekļa lapas priekšskatījums pēc izpildes fāzes:
Iepriekš redzamais gif parāda, ka otrais divstūris kļūst neredzams, virzot peles kursoru.
2. piemērs: Aktīvā stāvokļa izmantošana “neredzamajā” klasē
Stāvoklis “Aktīvs” piemēro stilus, kad lietotājs atlasa konkrētu elementu un nepamet. Tāpat kā tekstlodziņi, kad lietotājs sāk ievadīt datus laukā, šajā laikā lauks ir aktīvs. Lai iegūtu skaidrāku izpratni par aktīvo stāvokli un to, kā tas darbojas ar 'neredzamo' klasi, apmeklējiet tālāk norādīto kodu:
< ķermeni >< div klasē = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasē = 'bg-blue-500 p-3 noapaļots teksta centrs' >01< / div >
< div klasē = 'bg-blue-500 p-3 active:neredzams noapaļots teksta centrs' >02< / div >
< div klasē = 'bg-blue-500 p-3 noapaļots teksta centrs' >03< / div >
< / div >
< / ķermeni >
Iepriekš minētajā kodā klase ' neredzams ' ir piešķirts ' aktīvs 'stāvoklis otrajam' div ” elementu, lai otrais div elements tiktu paslēpts, kad tas tiek atlasīts.
Pēc izpildes tīmekļa lapas priekšskatījums izskatās šādi:
Iepriekš redzamā izvade parāda, ka, atlasot otro “div”, elements kļūst neredzams.
Secinājums
Kursora novietošanu un citus stāvokļus, piemēram, aktīvu vai fokusu, var izmantot redzamības utilīta nodrošinātajās klasēs, lai mainītu atlasīto elementu redzamības rekvizītus. Lai mainītu elementu redzamību peles kursorā, kursora novietošanas klase tiek izmantota kopā ar redzamības klasēm, kas atdalītas ar krāsu, piemēram, ' kursors:redzams ” vai “ lidināties: neredzams ”. Šajā emuārā ir izskaidrota procedūra, kā lietot kursoru, izmantojot redzamības utilītu.