Acest articol ilustrează utilizarea hoverului, a focalizării și a altor stări cu proprietăți de poziție în Tailwind.
Cum să utilizați Hover, Focus și alte state cu proprietate de poziție în Tailwind?
Hoverul, focalizarea și alte stări din Tailwind sunt folosite pentru a stila elementele din Tailwind, prezentând o interfață atractivă și ușor de utilizat și o experiență captivantă pentru utilizatori. Uneori, proprietatea poziției trebuie aplicată pentru a menține experiența la cele mai înalte standarde.
Metoda 1: Utilizarea variantei Hover cu proprietatea poziției
Varianta de trecere cu mouse-ul este utilizată pentru a stila elementele selectate atunci când utilizatorul mută cursorul peste acel element selectat. „ poziţie Atributul ” poate fi folosit împreună cu ” planare ” pentru a seta poziția înainte și după hover. Această pereche este folosită pentru a crea o experiență captivantă pentru utilizator.
Pasul 1: Adăugați proprietatea Hover cu Poziție în HTML
În codul de mai jos, proprietatea hover este aplicată de-a lungul proprietății poziției pe „ buton ' element:
< corp >
< buton clasă = „relativ w-40 h-12 bg-blue-500 hover:absolut hover:translate-x-4 hover:translate-y-4” >
< p clasă = „text-alb text-centr” > Hover Me < / p >
< / buton >
< / corp >
În acest cod:
- „ relativ ” clasa setează butonul relativ la pagina părinte.
- „ w-40 ” setează lățimea la 40px.
- „ h-12 ” setează înălțimea la 12px.
- „ bg-albastru-500 ” setează culoarea de fundal la albastru.
- „ hover: absolut ” schimbă poziția relativă a butonului în absolută atunci când cursorul mouse-ului se deplasează peste el.
- „ hover: traduce-x-4 ” mută butonul 4px la dreapta pe axa x și în același timp 4px în jos cu “ hover: traduce-y-4 ”.
- Textul este aliniat la centru prin „ centru de text ”.
Pasul 2: Verificare
Previzualizează pagina web creată de codul de mai sus, care arată astfel:
Ieșirea arată că elementul a fost mutat în direcția dreaptă și în jos cu 4px.
Metoda 2: Utilizarea variantei de focalizare cu proprietatea poziției
Varianta focus este folosită pentru a stila elementele HTML pentru a atrage atenția utilizatorului și a pune accent pe unele elemente. Poziția poate fi aplicată și împreună pentru a poziționa obiectul relativ sau absolut față de pagina părinte. Se face pentru a menține utilizatorul angajat.
Pasul 1: Adăugați proprietatea Focus cu Poziție în HTML
Creați un fișier HTML și aplicați proprietatea focus cu o poziție adecvată. De exemplu, poziția relativă este aplicată unei casete de introducere din codul de mai jos:
< / corp >
În acest cod:
- Setați poziția „ intrare ” elemente la “ relativ ”.
- „ focus: translate-x-4 ” mută butonul 4px la dreapta pe axa x și în același timp 4px în jos cu “ focus: traduce-y-4 ” când utilizatorul face clic pe caseta de introducere.
- „ focus: contur-2 ” creează un contur în jurul casetei de text atunci când îl face clic pe utilizator.
Pasul 2: Verificați ieșirea
Previzualizează pagina web creată de cod pentru a observa modificarea:
Ieșirea de mai sus arată că stilul a fost aplicat elementului selectat atunci când acesta devine focalizat.
Utilizarea variantei active cu proprietatea poziției.
Varianta activă este folosită pentru a stila elementele HTML pentru a defini starea când utilizatorul face clic și ține apăsat un buton sau alt element. Proprietatea poziției poate face rezultatul mai captivant pentru utilizatori, creând o experiență mai dinamică.
Pasul 1: Adăugați proprietatea Hover cu Poziție în HTML
Creați un fișier HTML și aplicați varianta activă împreună cu proprietatea poziției. De exemplu, aceste proprietăți sunt aplicate unui buton din exemplul de cod de mai jos:
< buton clasă = „relativ w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400” >
< span clasă = 'text-alb' >Dă clic pe mine< / span >
< / buton >
< / corp >
În codul de mai sus:
- Setați poziția „ buton „element la „ relativ ”.
- „ bg-albastru-500 ” setează culoarea de fundal a butonului la albastru.
- „ activ: traduce-y-2 ” mută butonul 2px în jos și schimbă culoarea butonului în verde prin ” activ: bg-green-400 ”.
Pasul 2: Verificați ieșirea
Previzualizați pagina web creată de codul de mai sus și faceți clic și mențineți apăsat butonul pentru a vedea modificarea:
Gif-ul de mai sus arată că stilul elementului butonului selectat se schimbă atunci când devine activ.
Asta este tot pentru a aplica hover, focalizare și alte stări cu proprietatea poziției în Tailwind.
Concluzie
Hover, focus și alte stări pot fi utilizate cu proprietatea poziției utilizând clasele predefinite de hover, focus și alte stări, apoi aplicând atribute ale clasei de poziție precum „ absolut ', ' relativ ” și așa mai departe împreună. Acest blog a arătat cum să utilizați hoverul, focalizarea și alte stări cu utilitate de poziție în Tailwind.