Com utilitzar Hover, Focus i altres estats amb propietats de posició a Tailwind?

Com Utilitzar Hover Focus I Altres Estats Amb Propietats De Posicio A Tailwind



El marc Tailwind en CSS és la primera opció de tots els desenvolupadors a causa de les àmplies opcions per dissenyar els elements HTML. Ofereix una gran col·lecció d'eines a la comunitat. És un marc de primera utilitat, utilitzat activament pels desenvolupadors per crear aplicacions mòbils, d'escriptori i web. La utilitat 'Posició' controla com es col·loquen els elements dins del DOM.

Aquest article il·lustra l'ús del gir, el focus i altres estats amb propietats de posició a Tailwind.

Com utilitzar Hover, Focus i altres estats amb propietats de posició a Tailwind?

El gir, el focus i altres estats de Tailwind s'utilitzen per estilitzar els elements de Tailwind que presenten una interfície atractiva i fàcil d'utilitzar i una experiència atractiva per als usuaris. De vegades, la propietat de la posició s'ha d'aplicar per mantenir l'experiència als seus estàndards més alts.







Mètode 1: ús de la variant Hover amb la propietat de la posició

La variant de passar el cursor s'utilitza per estilitzar els elements seleccionats quan l'usuari mou el cursor sobre l'element seleccionat. El ' posició L'atribut ' es pot utilitzar juntament amb ' flotar ” per establir la posició abans i després del desplaçament. Aquest parell s'utilitza per crear una experiència atractiva per a l'usuari.



Pas 1: afegiu la propietat Hover amb Posició en HTML
Al codi següent, la propietat hover s'aplica al llarg de la propietat de posició a ' botó 'element:



< cos >
< botó classe = 'relatiu w-40 h-12 bg-blue-500 hover:absolut hover:translate-x-4 hover:translate-y-4' >
< pàg classe = 'text-centre de text blanc' > Passa'm el ratolí < / pàg >
< / botó >
< / cos >

En aquest codi:





  • El ' relatiu ” classe estableix el botó en relació a la pàgina principal.
  • w-40 ” estableix l'amplada a 40 píxels.
  • h-12 ” estableix l'alçada a 12 px.
  • bg-blau-500 ” estableix el color de fons en blau.
  • flotar: absolut ” canvia la posició relativa del botó a absoluta quan el cursor del ratolí es mou per sobre.
  • Hover: traduir-x-4 ” mou el botó 4px cap a la dreta en l'eix x i alhora 4px cap avall per “ hover: traduir-y-4 ”.
  • El text està alineat al centre amb “ centre de text ”.

Pas 2: verificació
Previsualitza la pàgina web creada amb el codi anterior, que té aquest aspecte:



La sortida mostra que l'element s'ha mogut 4px cap a la dreta i cap avall.

Mètode 2: ús de la variant de focus amb la propietat de posició

La variant focus s'utilitza per estilitzar elements HTML per cridar l'atenció de l'usuari i donar èmfasi a alguns elements. La posició també es pot aplicar conjuntament per posicionar l'objecte relatiu o absolut a la pàgina principal. Es fa per mantenir l'usuari compromès.

Pas 1: afegiu la propietat Focus amb Posició en HTML
Creeu un fitxer HTML i apliqueu la propietat focus amb una posició adequada. Per exemple, la posició relativa s'aplica a un quadre d'entrada al codi següent:

< cos >

< / cos >

En aquest codi:

  • Estableix la posició del ' entrada 'elements a' relatiu ”.
  • focus: traduir-x-4 ” mou el botó 4px cap a la dreta en l'eix x i alhora 4px cap avall per “ focus: translate-i-4 ” quan l'usuari fa clic al quadre d'entrada.
  • focus: esquema-2 ” crea un esquema al voltant del quadre de text quan l'usuari fa clic.

Pas 2: verifiqueu la sortida
Previsualitza la pàgina web creada pel codi per notar el canvi:

La sortida anterior mostra que l'estil s'ha aplicat a l'element seleccionat quan es concentra.

Ús de la variant activa amb la propietat de posició.

La variant activa s'utilitza per estilitzar els elements HTML per definir l'estat quan l'usuari fa clic i manté premut un botó o algun altre element. La propietat de posició pot fer que la sortida sigui més atractiva per als usuaris creant una experiència més dinàmica.

Pas 1: afegiu la propietat Hover amb Posició en HTML
Creeu un fitxer HTML i apliqueu la variant activa juntament amb la propietat de posició. Per exemple, aquestes propietats s'apliquen a un botó de l'exemple de codi següent:

< cos >
< botó classe = 'relatiu w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< span classe = 'text-blanc' > Feu clic a mi< / span >
< / botó >
< / cos >

En el codi anterior:

  • Estableix la posició del ' botó 'element a' relatiu ”.
  • bg-blau-500 ” estableix el color de fons del botó en blau.
  • actiu: traduir-y-2 ” mou el botó 2 px cap avall i canvia el color del botó a verd amb “ actiu: bg-green-400 ”.

Pas 2: verifiqueu la sortida
Previsualitzeu la pàgina web creada pel codi anterior i feu clic i manteniu premut el botó per veure el canvi:

El gif anterior mostra que l'estil de l'element del botó seleccionat es canvia quan s'activa.

Això és tot per aplicar el gir, el focus i altres estats amb propietat de posició a Tailwind.

Conclusió

Els estats hover, focus i altres estats es poden utilitzar amb la propietat de la posició utilitzant les classes predefinides de hover, focus i altres estats i després aplicant atributs de classe de posició com ' absolut ”, “ relatiu ” i així successivament conjuntament. Aquest bloc ha mostrat com s'utilitza el gir, el focus i altres estats amb la utilitat de posició a Tailwind.