Hvordan bruke hover, fokus og andre stater med posisjonseiendom i medvind?

Denne artikkelen illustrerer bruken av hover, fokus og andre tilstander med posisjonsegenskaper i Tailwind.

Hvordan bruke hover, fokus og andre stater med posisjonseiendom i medvind?

Hover, fokus og andre tilstander i Tailwind brukes til å style elementer i Tailwind som presenterer et attraktivt og brukervennlig grensesnitt og engasjerende opplevelse for brukerne. Noen ganger skal posisjonsegenskapen brukes for å opprettholde opplevelsen til den høyeste standarden.

Metode 1: Bruke hover-variant med posisjonsegenskap

Svevevarianten brukes til å style utvalgte elementer når brukeren flytter markøren over det valgte elementet. « posisjon '-attributt kan brukes sammen med ' sveve ” for å stille inn posisjonen før og etter svevingen. Dette paret brukes til å skape en engasjerende opplevelse for brukeren.

Trinn 1: Legg til hover-egenskapen med posisjon i HTML
I koden nedenfor brukes hover-egenskapen langs posisjonsegenskapen på ' knapp ' element:

I denne koden:

• « slektning ” klasse setter knappen i forhold til den overordnede siden.
• ' w-40 ” setter bredden til 40px.
• ' h-12 ” setter høyden til 12px.
• ' bg-blå-500 ” setter bakgrunnsfargen til blå.
• ' sveve: absolutt ” endrer den relative plasseringen av knappen til absolutt når musepekeren beveger seg over den.
• ' hover: translate-x-4 ' flytter knappen 4px til høyre på x-aksen og samtidig 4px ned med ' hover: translate-y-4 '.
• Teksten er midtstilt med ' tekst-senter '.

Trinn 2: Verifisering
Forhåndsvis nettsiden opprettet av koden ovenfor, som ser slik ut:

Utgangen viser at elementet har blitt flyttet i høyre og nedover retning med 4px.

Metode 2: Bruke fokusvariant med posisjonsegenskap

Fokusvarianten brukes til å style HTML-elementer for å få oppmerksomheten til brukeren og legge vekt på enkelte elementer. Posisjonen kan også brukes sammen for å plassere objektet relativt eller absolutt til den overordnede siden. Det gjøres for å holde brukeren engasjert.

Trinn 1: Legg til fokusegenskapen med posisjon i HTML
Lag en HTML-fil og bruk fokusegenskapen med en passende posisjon. For eksempel brukes relativ posisjon på en inndataboks i koden nedenfor:

I denne koden:

• Still inn posisjonen til ' input 'elementer til ' slektning '.
• ' fokus: translate-x-4 ' flytter knappen 4px til høyre på x-aksen og samtidig 4px ned med ' fokus: translate-y-4 ” når brukeren klikker på inndataboksen.
• ' fokus: disposisjon-2 ” oppretter en disposisjon rundt tekstboksen når den klikkes av brukeren.

Trinn 2: Bekreft utdata
Forhåndsvis nettsiden opprettet med kode for å legge merke til endringen:

Utdataene ovenfor viser at stilen har blitt brukt på det valgte elementet når det blir fokusert.

Bruke aktiv variant med posisjonsegenskap.

Den aktive varianten brukes til å style HTML-elementene for å definere tilstanden når brukeren klikker og holder en knapp eller et annet element. Posisjonsegenskapen kan gjøre utdataene mer engasjerende for brukere som skaper en mer dynamisk opplevelse.

Trinn 1: Legg til hover-egenskapen med posisjon i HTML
Opprett en HTML-fil og bruk den aktive varianten sammen med posisjonsegenskapen. Disse egenskapene brukes for eksempel på en knapp i kodeeksemplet nedenfor:

I koden ovenfor:

• Still inn posisjonen til ' knapp ' element til ' slektning '.
• ' bg-blå-500 ” setter bakgrunnsfargen på knappen til blå.
• ' aktiv: translate-y-2 ' flytter knappen 2px nedover og endrer knappens farge til grønn ved ' aktiv: bg-green-400 '.

Trinn 2: Bekreft utdata
Forhåndsvis nettsiden opprettet av koden ovenfor, og klikk og hold knappen for å se endringen:

GIF-en ovenfor viser stilen til det valgte knappeelementet endres når det blir aktivt.

Det er alt for å bruke hover, fokus og andre stater med posisjonseiendom i Tailwind.

Konklusjon

Hover, fokus og andre tilstander kan brukes med posisjonsegenskap ved å bruke de forhåndsdefinerte klassene for hover, fokus og andre tilstander og deretter bruke posisjonsklasseattributter som ' absolutt ', ' slektning ” og så videre i sammenheng. Denne bloggen har vist hvordan du bruker hover, fokus og andre tilstander med posisjonsverktøy i Tailwind.