CSS piedāvā dažādus ietvarus programmētājiem, lai izstrādātu dinamiskas tīmekļa lapas. Tas ir patīkamāks, jo nodrošina visas svarīgās funkcijas un rīkus vienuviet. Tātad jums nav jāizmanto citi ietvari. Tailwind sistēma CSS ir visplašāk izmantotā, jo tā ietaupa lietotāja laiku, lai rakstītu pārmērīgu CSS.
Šajā rokasgrāmatā ir sniegta informācija par kursora novietošanas, fokusa un citu stāvokļu izmantošanu programmā Tailwind.
Kā Tailwind izmantot kursoru, fokusu un citus stāvokļus?
Veidojot tīmekļa lapas, ir nepieciešams pievienot dinamiskus un pievilcīgus elementus, lai uzturētu interaktivitāti ar lietotājiem. Tailwind funkcijas var izmantot, lai izveidotu interaktīvas un dinamiskas lapas, nerakstot papildu pielāgotu CSS. Dažas funkcijas ir “virzīšana”, “fokuss” un “aktīva”, kas palīdz dizainam pievienot pievilcību.
Kursora novietošanas varianta izmantošana HTML
Kursora novietošanas rekvizīts tiek izmantots HTML elementa stila veidošanai, kad lietotājs pārvieto peles kursoru virs noteikta elementa. Tas palīdz nodrošināt vienmērīgu pieredzi.
1. darbība. Lietojiet kursora rekvizītu HTML
Izveidojiet HTML failu un lietojiet kursora novietošanas rekvizītu kādam koda elementam. Lai gūtu priekšstatu, apskatiet tālāk norādīto kodu:
< ķermeni >
< div klasē = 'centrs' >
< pogu klasē = 'bg-green-500 hover:bg-blue-500 text-white font-bold noapaļots' >
Virziet Mani!
< / pogu >
< / div >
< / ķermeni >
Šajā kodā:
- Poga ar nosaukumu ' Virziet Mani! ” ir izveidots ar pogas tagu.
- ' bg-green-500 ” iestata pogas fona krāsu uz zaļu.
- ' virziet kursoru: bg-blue-500 ” maina pogas krāsu no zaļas uz zilu, kad pele tiek pārvietota virs tās.
- Teksts pogā ir baltā krāsā ' teksts-balts ' un ' font-bold ” padara fontu treknrakstā.
- Pogas forma ir noapaļota ar ' noapaļots ”.
2. darbība: priekšskatiet izvadi
Pēc iepriekš minētā koda izpildes galīgais skats izskatās šādi:
Var redzēt, ka poga maina krāsu, kad peles kursors tiek pārvietots virs tās.
Fokusa varianta izmantošana HTML
Fokusa rekvizīts tiek izmantots, lai veidotu HTML elementu stilu tā, ka, lietotājam noklikšķinot uz elementa, tas tiek izcelts, lai pievērstu lietotāja uzmanību.
1. darbība. Lietojiet fokusa īpašumu HTML kodā
Izveidojiet HTML failu un lietojiet fokusa rekvizītu kādam vēlamajam elementam. Lai iegūtu iespaidu, apsveriet tālāk norādīto kodu:
< div >
< / div >
< / ķermeni >
Šajā kodā:
- ' flex ” klase rada flex.
- ' attaisnot-centrs ” attaisno satura izlīdzināšanu līdz centram.
- ' priekšmetu centrs ” klase pielāgo objektus ekrāna centram.
- ' h ekrāns ” iestata ekrāna izmēru atbilstoši skata logam.
- ' bg-blue-200 ” iestata fona krāsu uz zilu.
- Tiek izveidots teksta ievades lodziņš.
- ' fokuss: bg-green-300 ” maina ievades lodziņa krāsu uz zaļu, kad lietotājs noklikšķina.
- ' w-64 ” iestata platumu uz 64 pikseļiem.
- ' h-10 ” iestata augstumu uz 10 pikseļiem.
- ' px-4 ” pievieno 4 pikseļu polsterējumu augšpusē un kreisajā pusē.
- ' py-2 ” pievieno 2 pikseļu polsterējumu augšpusē un apakšā.
2. darbība. Priekšskatiet fokusa īpašumu
Saglabājiet HTML kodu un atveriet tā izveidoto tīmekļa lapu. Pēc tam pārvietojiet kursoru uz ievades lodziņa un noklikšķiniet uz tā, un notiks tālāk norādītās izmaiņas:
HTML aktīvā varianta izmantošana
Šis rekvizīts tiek izmantots, lai stilizētu elementus nosacījumam, kad lietotājs dinamiski pieskaras elementam. Aktīvais stāvoklis ir laika periods no kursora aktivizēšanas stadijas un tā atbrīvotā stāvokļa.
Sintakse
aktīvs: { īpašums }Konkrētais CSS rekvizīts tiek lietots atlasītajam elementam.
1. darbība. Lietojiet aktīvo variantu HTML kodā
Izveidojiet HTML failu un lietojiet aktīvo rekvizītu kādam elementam, kas šajā gadījumā ir poga:
< div klasē = 'flex justify-center items-center h-screen' >
< pogu klasē = 'bg-green-600 p-4 noapaļots-md pārejas-transformācijas ilgums-400 transformācijas aktīvs: skala-110' >
Noklikšķiniet uz ME!
< / pogu >
< / div >
< / ķermeni >
Šajā kodā:
- ' bg-green-600 ” iestata fona krāsu uz zaļu.
- ' p-4 ” pievieno 4 pikseļu polsterējumu.
- ' noapaļots-md ” padara pogas formu noapaļotu.
- ' pāreja-transformācija ' tiek izmantots, lai pārveidotu pogu uz nelielu laiku, ko iestata ar ' ilgums-400 transformācija ”.
- ' aktīvs: skala-110 ” pārveido pogu uz lielāku izmēru.
2. darbība: priekšskatiet izvadi
Saglabājiet iepriekš minēto kodu HTML failā un priekšskatiet tā izveidoto tīmekļa lapu. Tīmekļa lapa izskatīsies šādi:
Var redzēt, ka pogas izmērs palielinās, kad pele to tur, un, tiklīdz to atlaiž, tā atgriežas sākotnējā stāvoklī.
Secinājums
Lai programmā Tailwind izmantotu kursoru, fokusu un citus stāvokļus, izmantojiet iepriekš definētas stāvokļu klases, piemēram, “virzīšana”, un piemērojiet tai dažus stila rekvizītus, piemēram, krāsas maiņu, fokusa gredzena izveidi utt. Displeja utilītas tiek izmantotas, lai parādītu mērogojamu izvadi. Šis raksts ir demonstrējis metodi, kā izmantot kursoru, fokusu un citus stāvokļus Tailwind.