CSS biedt een verscheidenheid aan raamwerken waarmee programmeurs dynamische webpagina's kunnen ontwerpen. Het is leuker omdat het alle belangrijke functies en hulpmiddelen op één plek biedt. U hoeft dus geen andere raamwerken te gebruiken. Het Tailwind-framework in CSS wordt het meest gebruikt omdat het de gebruiker tijd bespaart om overmatige CSS te schrijven.
Deze handleiding beschrijft het gebruik van hover, focus en andere statussen in Tailwind.
Hoe gebruik je Hover, Focus en andere staten in Tailwind?
Bij het ontwerpen van webpagina's is het noodzakelijk om dynamische en aantrekkelijke elementen toe te voegen om de interactiviteit met de gebruikers te behouden. De functies in Tailwind kunnen worden gebruikt om interactieve en dynamische pagina's te maken zonder extra aangepaste CSS te schrijven. Sommige functies zijn “hover”, “focus” en “actief” die helpen bij het toevoegen van aantrekkingskracht aan ontwerpen.
Hovervariant gebruiken in HTML
De hover-eigenschap wordt gebruikt om een HTML-element op te maken wanneer de gebruiker de muiscursor over een specifiek element beweegt. Het helpt om een soepele ervaring te bieden.
Stap 1: Pas de eigenschap “hover” toe in HTML
Maak een HTML-bestand en pas de hover-eigenschap toe op een bepaald element in de code. Om een idee te krijgen, bekijk de onderstaande code:
< lichaam >
< div klas = 'centrum' >
< knop klas = 'bg-green-500 hover:bg-blue-500 tekst-wit lettertype-vet afgerond' >
Beweeg mij!
< / knop >
< / div >
< / lichaam >
In deze code:
- Een knop met de naam “ Beweeg mij! ” wordt gemaakt door de knoptag.
- “ bg-groen-500 ” stelt de achtergrondkleur van de knop in op groen.
- “ hover: bg-blauw-500 ” verandert de knopkleur van groen in blauw wanneer de muis eroverheen wordt bewogen.
- De tekst op de knop heeft een witte kleur “ tekst-wit ' En ' Lettertype vetgedrukt ” maakt het lettertype vetgedrukt.
- De vorm van de knop wordt op rond ingesteld met “ afgerond ”.
Stap 2: Bekijk een voorbeeld van de uitvoer
Na het uitvoeren van de bovenstaande code ziet de uiteindelijke weergave er als volgt uit:
Je kunt zien dat de knop van kleur verandert als de muiscursor eroverheen wordt bewogen.
Focusvariant gebruiken in HTML
De eigenschap focus wordt gebruikt om HTML-elementen zo op te maken dat wanneer de gebruiker op het element klikt, dit wordt gemarkeerd om de aandacht van de gebruiker te trekken.
Stap 1: Pas de Focus-eigenschap toe in de HTML-code
Maak een HTML-bestand en pas de focus-eigenschap toe op een gewenst element. Om een indruk te krijgen, bekijk de onderstaande code:
< div >
< / div >
< / lichaam >
In deze code:
- De ' buigen '-klasse creëert een flex.
- De ' rechtvaardigen-centrum ” rechtvaardigt de uitlijning van de inhoud naar het midden.
- De ' items-centrum ”-klasse past de objecten aan naar het midden van het scherm.
- De ' h-scherm ” stelt de schermgrootte in op basis van de viewport.
- “ bg-blauw-200 ” stelt de achtergrondkleur in op blauw.
- Er wordt een invoervak met tekst gemaakt.
- De ' focus: bg-groen-300 ” verandert de kleur van het invoervak in groen wanneer erop wordt geklikt door de gebruiker.
- “ w-64 ” stelt de breedte in op 64px.
- “ u-10 ” stelt de hoogte in op 10px.
- “ px-4 'Voegt een opvulling van 4px toe aan de boven- en linkerkant.
- “ py-2 'voegt een opvulling van 2px toe aan de boven- en onderkant.
Stap 2: Bekijk een voorbeeld van de Focus-eigenschap
Sla de HTML-code op en open de webpagina die ermee is gemaakt. Verplaats vervolgens de cursor naar het invoervak en klik erop. De onderstaande wijziging zal plaatsvinden:
De actieve variant in HTML gebruiken
Deze eigenschap wordt gebruikt om elementen op te maken voor de voorwaarde wanneer de gebruiker dynamisch op het element tikt. De actieve status is de tijdsperiode vanaf de activeringsfase van de cursor en de vrijgegeven status.
Syntaxis
actief: { eigendom }De specifieke CSS-eigenschap wordt toegepast op het geselecteerde element.
Stap 1: Pas de actieve variant toe in de HTML-code
Maak een HTML-bestand en pas de actieve eigenschap toe op een element dat in het onderstaande geval een knop is:
< div klas = 'flex justify-center items-center h-scherm' >
< knop klas = 'bg-green-600 p-4 afgeronde md transitie-transformatie duur-400 transformatie actief: schaal-110' >
Klik hier!
< / knop >
< / div >
< / lichaam >
In deze code:
- “ bg-groen-600 ” stelt de achtergrondkleur in op groen.
- “ p-4 'voegt een opvulling van 4px toe.
- “ afgerond-md ” maakt de knoopvorm afgerond.
- “ transitie-transformatie ” wordt gebruikt om de knop te transformeren voor een korte tijdsduur die wordt ingesteld door “ duur-400 transformatie ”.
- De ' actief: schaal-110 ' transformeert de knop naar een groter formaat.
Stap 2: Bekijk een voorbeeld van de uitvoer
Sla de bovenstaande code op in een HTML-bestand en bekijk een voorbeeld van de webpagina die ermee is gemaakt. De webpagina zal er als volgt uitzien:
Het is te zien dat de knop groter wordt wanneer de muis deze vasthoudt en zodra deze wordt losgelaten, terugkeert naar de oorspronkelijke staat.
Conclusie
Om hover, focus en andere staten in Tailwind te gebruiken, gebruikt u de vooraf gedefinieerde statusklassen zoals 'hover' en past u er enkele stijleigenschappen op toe, zoals het veranderen van kleur, het maken van een focusring, enzovoort. De weergavehulpprogramma's worden gebruikt om een schaalbare uitvoer te presenteren. Dit artikel heeft de methode gedemonstreerd om de hover-, focus- en andere statussen in Tailwind te gebruiken.