Šajā rakstā ir ilustrēts kursora novietošanas, fokusa un citu stāvokļu lietojums ar pozīcijas īpašībām programmā Tailwind.
Kā lietot kursoru, fokusu un citus stāvokļus ar pozīcijas īpašumu programmā Tailwind?
Kursors, fokuss un citi stāvokļi programmā Tailwind tiek izmantoti, lai veidotu Tailwind elementus, nodrošinot lietotājiem pievilcīgu un lietotājam draudzīgu saskarni un saistošu pieredzi. Dažreiz pozīcijas īpašība ir jāpiemēro, lai saglabātu pieredzi atbilstoši augstākajiem standartiem.
1. metode: kursora novietošanas varianta izmantošana ar pozīcijas rekvizītu
Kursora novietošanas variants tiek izmantots atlasīto elementu stilam, kad lietotājs pārvieto kursoru virs šī atlasītā elementa. ' pozīciju ' atribūtu var izmantot kopā ar ' novietojiet kursoru ”, lai iestatītu pozīciju pirms un pēc kursora virzīšanas. Šis pāris tiek izmantots, lai radītu lietotājam saistošu pieredzi.
1. darbība. Pievienojiet kursora rekvizītu ar pozīciju HTML
Tālāk esošajā kodā kursora novietošanas rekvizīts tiek lietots kopā ar pozīcijas rekvizītu uz “ pogu ” elements:
< ķermenis >
< pogu klasē = 'relatīvais w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4' >
< lpp klasē = 'teksts-balts teksta centrs' > Virziet Mani < / lpp >
< / pogu >
< / ķermenis >
Šajā kodā:
- ' radinieks ” klase iestata pogu attiecībā pret vecāklapu.
- ' w-40 ” iestata platumu uz 40 pikseļiem.
- ' h-12 ” iestata augstumu uz 12 pikseļiem.
- ' bg-blue-500 ” iestata fona krāsu uz zilu.
- ' lidināties: absolūts ” maina pogas relatīvo pozīciju uz absolūtu, kad peles kursors pārvietojas virs tās.
- ' virziet kursoru: translate-x-4 ” pārvieto pogu par 4 pikseļiem pa labi uz x ass un tajā pašā laikā 4 pikseļus uz leju par “ virziet kursoru: translate-y-4 ”.
- Teksts ir līdzināts centrā ar ' teksta centrs ”.
2. darbība. Verifikācija
Priekšskatiet tīmekļa lapu, kas izveidota, izmantojot iepriekš minēto kodu, un tā izskatās šādi:
Izvade parāda, ka elements ir pārvietots pa labi un uz leju par 4 pikseļiem.
2. metode: fokusa varianta izmantošana ar pozīcijas rekvizītu
Fokusa variants tiek izmantots HTML elementu stila veidošanai, lai pievērstu lietotāja uzmanību un akcentētu dažus elementus. Pozīciju var lietot arī kopā, lai pozicionētu objektu relatīvi vai absolūtā attiecībā pret vecāklapu. Tas tiek darīts, lai lietotājs būtu iesaistīts.
1. darbība. Pievienojiet fokusa īpašumu ar pozīciju HTML
Izveidojiet HTML failu un izmantojiet fokusa rekvizītu ar piemērotu pozīciju. Piemēram, relatīvā pozīcija tiek lietota ievades lodziņā tālāk norādītajā kodā:
< / ķermenis >
Šajā kodā:
- Iestatiet pozīciju ' ievade ' elementi uz ' radinieks ”.
- ' fokuss: translate-x-4 ” pārvieto pogu par 4 pikseļiem pa labi uz x ass un tajā pašā laikā 4 pikseļus uz leju par “ fokuss: tulkot-y-4 ”, kad lietotājs noklikšķina uz ievades lodziņa.
- ' fokuss: kontūra-2 ” izveido kontūru ap tekstlodziņu, kad lietotājs uz tā noklikšķina.
2. darbība: pārbaudiet izvadi
Priekšskatiet tīmekļa lapu, kas izveidota ar kodu, lai pamanītu izmaiņas:
Iepriekš redzamā izvade parāda, ka stils ir piemērots atlasītajam elementam, kad tas tiek fokusēts.
Aktīvā varianta izmantošana ar pozīcijas rekvizītu.
Aktīvais variants tiek izmantots HTML elementu stila veidošanai, lai definētu stāvokli, kad lietotājs noklikšķina un tur uz pogas vai kāda cita elementa. Pozīcijas rekvizīts var padarīt izvadi saistošāku lietotājiem, radot dinamiskāku pieredzi.
1. darbība. Pievienojiet kursora rekvizītu ar pozīciju HTML
Izveidojiet HTML failu un lietojiet aktīvo variantu kopā ar pozīcijas rekvizītu. Piemēram, šie rekvizīti tiek lietoti pogai tālāk norādītajā koda piemērā:
< pogu klasē = 'relatīvais w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< span klasē = 'teksts-balts' >Noklikšķiniet uz mani< / span >
< / pogu >
< / ķermenis >
Iepriekš minētajā kodā:
- Iestatiet pozīciju ' pogu ' elements uz ' radinieks ”.
- ' bg-blue-500 ” iestata pogas fona krāsu uz zilu.
- ' aktīvs: translate-y-2 ” pārvieto pogu par 2 pikseļiem uz leju un maina pogas krāsu uz zaļu, izmantojot aktīvs: bg-green-400 ”.
2. darbība: pārbaudiet izvadi
Priekšskatiet tīmekļa lapu, kas izveidota, izmantojot iepriekš minēto kodu, un noklikšķiniet un turiet pogu, lai redzētu izmaiņas:
Iepriekš redzamais gif parāda, ka atlasītā pogas elementa stils tiek mainīts, kad tas kļūst aktīvs.
Tas ir viss, lai lietotu kursoru, fokusu un citus stāvokļus ar pozīcijas īpašumu programmā Tailwind.
Secinājums
Kursoru, fokusu un citus stāvokļus var izmantot ar pozīcijas rekvizītu, izmantojot iepriekš definētas kursora novietošanas, fokusa un citu stāvokļu klases, pēc tam piemērojot pozīcijas klases atribūtus, piemēram, ' absolūts ',' radinieks ” un tā tālāk kopā. Šajā emuārā ir parādīts, kā lietot kursoru, fokusu un citus stāvokļus, izmantojot pozīcijas utilītu programmā Tailwind.