Dit artikel illustreert het gebruik van hover, focus en andere statussen met positie-eigenschappen in Tailwind.
Hoe Hover, Focus en andere staten te gebruiken met positie-eigenschap in rugwind?
De hover-, focus- en andere statussen in Tailwind worden gebruikt om elementen in Tailwind te stylen, waardoor gebruikers een aantrekkelijke en gebruiksvriendelijke interface en een boeiende ervaring krijgen. Soms moet de positie-eigenschap worden toegepast om de ervaring op het hoogste niveau te houden.
Methode 1: Hovervariant gebruiken met positie-eigenschap
De hover-variant wordt gebruikt om geselecteerde elementen een stijl te geven wanneer de gebruiker de cursor over dat geselecteerde element beweegt. De ' positie ” attribuut kan worden gebruikt in combinatie met “ zweven ” om de positie voor en na de hover in te stellen. Dit paar wordt gebruikt om een boeiende ervaring voor de gebruiker te creëren.
Stap 1: Voeg de Hover-eigenschap met positie toe in HTML
In de onderstaande code wordt de hover-eigenschap toegepast langs de position-eigenschap op “ knop ”element:
< lichaam >
< knop klas = 'relatief w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< P klas = 'tekst-witte tekst-midden' > Beweeg mij < / P >
< / knop >
< / lichaam >
In deze code:
- De ' familielid ”-klasse stelt de knop in ten opzichte van de bovenliggende pagina.
- “ w-40 ” stelt de breedte in op 40px.
- “ u-12 ” stelt de hoogte in op 12px.
- “ bg-blauw-500 ” stelt de achtergrondkleur in op blauw.
- “ zweven: absoluut ” verandert de relatieve positie van de knop in absoluut wanneer de muiscursor erover beweegt.
- “ hover: vertalen-x-4 ” verplaatst de knop 4px naar rechts op de x-as en tegelijkertijd 4px naar beneden met “ hover: vertalen-y-4 ”.
- De tekst wordt gecentreerd uitgelijnd met “ tekst-centrum ”.
Stap 2: Verificatie
Bekijk een voorbeeld van de webpagina die met de bovenstaande code is gemaakt en ziet er als volgt uit:
De uitvoer laat zien dat het element 4px naar rechts en naar beneden is verplaatst.
Methode 2: Focusvariant gebruiken met positie-eigenschap
De focusvariant wordt gebruikt om HTML-elementen op te maken om de aandacht van de gebruiker te trekken en de nadruk te leggen op sommige elementen. De positie kan ook in combinatie worden toegepast om het object relatief of absoluut ten opzichte van de bovenliggende pagina te positioneren. Dit wordt gedaan om de gebruiker betrokken te houden.
Stap 1: Voeg de Focus-eigenschap met Positie toe in HTML
Maak een HTML-bestand en pas de focus-eigenschap toe met een geschikte positie. De relatieve positie wordt bijvoorbeeld toegepast op een invoervak in de onderstaande code:
< / lichaam >
In deze code:
- Stel de positie in van de “ invoer ' elementen naar ' familielid ”.
- “ focus: vertalen-x-4 ” verplaatst de knop 4px naar rechts op de x-as en tegelijkertijd 4px naar beneden met “ focus: vertalen-y-4 'wanneer de gebruiker op het invoervak klikt.
- “ focus: overzicht-2 ' Creëert een omtrek rond het tekstvak wanneer erop wordt geklikt door de gebruiker.
Stap 2: Controleer de uitvoer
Bekijk een voorbeeld van de webpagina die met code is gemaakt om de wijziging op te merken:
De bovenstaande uitvoer laat zien dat de stijl is toegepast op het geselecteerde element wanneer het wordt gefocust.
Actieve variant gebruiken met positie-eigenschap.
De actieve variant wordt gebruikt om de HTML-elementen op te maken om de status te definiëren wanneer de gebruiker op een knop of een ander element klikt en deze ingedrukt houdt. De eigenschap position kan de uitvoer aantrekkelijker maken voor gebruikers, waardoor een meer dynamische ervaring ontstaat.
Stap 1: Voeg de Hover-eigenschap met positie toe in HTML
Maak een HTML-bestand en pas de actieve variant toe in combinatie met de position-eigenschap. Deze eigenschappen worden bijvoorbeeld toegepast op een knop in het onderstaande codevoorbeeld:
< knop klas = 'relatief w-48 h-12 bg-blue-500 actief:translate-y-2 actief:bg-green-400' >
< span klas = 'tekst-wit' >Klik op mij< / span >
< / knop >
< / lichaam >
In de bovenstaande code:
- Stel de positie in van de “ knop 'element naar' familielid ”.
- “ bg-blauw-500 ” stelt de achtergrondkleur van de knop in op blauw.
- “ actief: vertalen-y-2 ” verplaatst de knop 2px naar beneden en verandert de knopkleur in groen met “ actief: bg-groen-400 ”.
Stap 2: Controleer de uitvoer
Bekijk een voorbeeld van de webpagina die met de bovenstaande code is gemaakt en houd de knop ingedrukt om de wijziging te zien:
De bovenstaande gif laat zien dat de stijl van het geselecteerde knopelement verandert wanneer het actief wordt.
Dat is alles om de hover-, focus- en andere statussen met position-eigenschap in Tailwind toe te passen.
Conclusie
De hover-, focus- en andere statussen kunnen worden gebruikt met de eigenschap position door de vooraf gedefinieerde klassen van hover-, focus- en andere statussen te gebruiken en vervolgens positieklasse-attributen toe te passen, zoals ' absoluut ', ' familielid ' enzovoort in combinatie. Deze blog heeft laten zien hoe je de hover-, focus- en andere statussen kunt gebruiken met het positiehulpprogramma in Tailwind.