Denne artikel illustrerer brugen af hover, fokus og andre tilstande med positionsegenskaber i Tailwind.
Hvordan bruger man hover, fokus og andre stater med positionsejendomme i medvind?
Hover, fokus og andre tilstande i Tailwind bruges til at style elementer i Tailwind, der præsenterer en attraktiv og brugervenlig grænseflade og engagerende oplevelse for brugerne. Nogle gange skal positionsejendommen anvendes for at opretholde oplevelsen til dens højeste standarder.
Metode 1: Brug af hover-variant med positionsegenskab
Svævevarianten bruges til at style udvalgte elementer, når brugeren flytter markøren over det valgte element. Det ' position ' attribut kan bruges sammen med ' svæve ” for at indstille positionen før og efter svævningen. Dette par bruges til at skabe en engagerende oplevelse for brugeren.
Trin 1: Tilføj svæveegenskaben med position i HTML
I nedenstående kode anvendes hoveregenskaben langs positionsegenskaben på ' knap ' element:
< legeme >
< knap klasse = 'relative w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4' >
< s klasse = 'tekst-hvid tekst-center' > Svæv mig < / s >
< / knap >
< / legeme >
I denne kode:
- Det ' i forhold ” klasse indstiller knappen i forhold til den overordnede side.
- “ w-40 ” indstiller bredden til 40px.
- “ h-12 ” indstiller højden til 12px.
- “ bg-blå-500 ” indstiller baggrundsfarven til blå.
- “ hover: absolut ” ændrer knappens relative position til absolut, når musemarkøren bevæger sig hen over den.
- “ hover: translate-x-4 ' flytter knappen 4px til højre på x-aksen og samtidig 4px ned med ' hover: translate-y-4 ”.
- Teksten er midtstillet med ' tekst-center ”.
Trin 2: Bekræftelse
Se en forhåndsvisning af websiden oprettet af ovenstående kode, som ser sådan ud:
Outputtet viser, at elementet er blevet flyttet i højre og nedadgående retning med 4px.
Metode 2: Brug af fokusvariant med positionsegenskab
Fokusvarianten bruges til at style HTML-elementer for at få brugerens opmærksomhed og lægge vægt på nogle elementer. Positionen kan også anvendes sammen for at placere objektet relativt eller absolut i forhold til den overordnede side. Det gøres for at holde brugeren engageret.
Trin 1: Tilføj fokusegenskaben med position i HTML
Opret en HTML-fil og anvend fokusegenskaben med en passende position. For eksempel anvendes relativ position på en inputboks i nedenstående kode:
< / legeme >
I denne kode:
- Indstil positionen for ' input ' elementer til ' i forhold ”.
- “ fokus: translate-x-4 ' flytter knappen 4px til højre på x-aksen og samtidig 4px ned med ' fokus: translate-y-4 ”, når brugeren klikker på inputboksen.
- “ fokus: disposition-2 ” opretter en kontur rundt om tekstboksen, når brugeren klikker på den.
Trin 2: Bekræft outputtet
Se et eksempel på den webside, der er oprettet med kode for at bemærke ændringen:
Ovenstående output viser, at stilen er blevet anvendt på det valgte element, når det bliver fokuseret.
Brug af aktiv variant med positionsegenskab.
Den aktive variant bruges til at style HTML-elementerne for at definere tilstanden, når brugeren klikker og holder en knap eller et andet element nede. Positionsegenskaben kan gøre outputtet mere engagerende for brugere, der skaber en mere dynamisk oplevelse.
Trin 1: Tilføj svæveegenskaben med position i HTML
Opret en HTML-fil og anvend den aktive variant i forbindelse med positionsegenskaben. For eksempel anvendes disse egenskaber på en knap i nedenstående kodeeksempel:
< knap klasse = 'relative w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< span klasse = 'tekst-hvid' >Klik på mig< / span >
< / knap >
< / legeme >
I ovenstående kode:
- Indstil positionen for ' knap ' element til ' i forhold ”.
- “ bg-blå-500 ” indstiller knappens baggrundsfarve til blå.
- “ aktiv: translate-y-2 ' flytter knappen 2px nedad og ændrer knappens farve til grøn ved ' aktiv: bg-grøn-400 ”.
Trin 2: Bekræft outputtet
Se et eksempel på websiden, der er oprettet af ovenstående kode, og klik og hold knappen nede for at se ændringen:
Ovenstående gif viser, at stilen af det valgte knapelement ændres, når det bliver aktivt.
Det er alt for at anvende hover, fokus og andre stater med positionsejendomme i Tailwind.
Konklusion
Svæve-, fokus- og andre tilstande kan bruges med positionsegenskaber ved at bruge de foruddefinerede klasser af hover, fokus og andre tilstande og derefter anvende positionsklasseattributter som ' absolut ', ' i forhold ” og så videre i forbindelse. Denne blog har vist, hvordan man bruger svæve-, fokus- og andre tilstande med positionsværktøj i Tailwind.