De ' h-scherm ” klasse in Tailwind wordt gebruikt om de viewporthoogte aan een HTML-element toe te wijzen. Viewport is gewoon een andere naam voor de schermgrootte van een klant. Met behulp hiervan kan de ontwikkelaar eenvoudig de hele viewport selecteren “ h-scherm ”-klasse en pas vervolgens verschillende Tailwind-klassen dienovereenkomstig toe.
Dit artikel beschrijft de procedure voor het toevoegen van de viewport-hoogte aan een element in Tailwind met behulp van de “ h-scherm ' klas.
Hoe stel ik een Viewport-hoogte van een element in met behulp van de “h-screen”-klasse in Tailwind?
Als aan een element de viewport-hoogte wordt toegewezen met behulp van de “ h-scherm ”-klasse, zal het automatisch de hoogte-eigenschap aanpassen aan het scherm van de klant. Om de viewport-hoogte in Tailwind te gebruiken, volgt u de onderstaande conventie:
< div klas = 'h-scherm' > Hallo < / div >
Uit bovenstaande demonstratie blijkt duidelijk dat de “ h-scherm ” wordt gebruikt in het klassenattribuut van het element, samen met verschillende andere Tailwind-klassen voor het ontwerpen van de lay-out.
Laten we een dummydashboard maken en een viewport-hoogte geven aan de zijbalk van het dashboardscherm.
< div klas = 'buigen' >
< div klas = 'w-56 h-scherm afgerond-lg bg-blauw-600 tekst-gecentreerde tekst-cyaan-50 py-6 tekst-2xl lettertype-vet' > Dashboard
< ul klas = 'tekst-lg py-8 spatie-y-7' >
< Dat >Team< / Dat >
< Dat >Projecten< / Dat >
< Dat >Rapporten< / Dat >
< Dat >Documenten< / Dat >
< / ul >
< / div >
< div klas = 'tekst-center tekst-3xl py-8 ps-5' >Welkom bij het Dashboard!< / div >
< / div >
Uitleg van de code:
- Eerst een ' div '-element wordt gemaakt met de klasse ' buigen ”, lijnt deze klasse de aanwezige items uit in een horizontale lijn.
- Maak vervolgens nog een “ div ' met 8px opvulling boven en onder met behulp van de ' py-2 ” klasse en wijs deze een vaste breedte toe met behulp van de “ w-56 ' klas. Stel vervolgens de hoogte van het element in op de viewport-hoogte met de “ h-scherm ' klas. De hoeken van de container zijn ingesteld op afgerond.
- De ' bg-{kleur}-{nummer} ”-klasse wordt gebruikt om een achtergrondkleur aan de container te geven. De ' tekst-centrum ” klasse lijnt de tekstinhoud uit in het midden. Het lettertypegewicht voor de tekst is ingesteld op “ vetgedrukt ”, en de lettergrootte is “ 2xl ”.
- Vervolgens verschijnt een ongeordende lijst “< ul >” is gemaakt met een grote lettergrootte en een “ 48px ”marge-top met behulp van de “space-y” staartwindklasse.
- Vervolgens worden vier lijstitems gemaakt met behulp van de “< Dat >”-tags.
- Een andere ' div ”-element wordt gemaakt met 32px top-bottom en 20px inline-start opvulling met behulp van de “ py” en “ps ' klassen.
De uitvoer voor de hierboven uitgelegde code is als volgt:
Uit de bovenstaande uitvoer is het duidelijk dat de zijbalk van het dashboard de viewport-hoogte van het scherm heeft. Dat is alles over het doel van de “ h-scherm ” les in Tailwind.
Conclusie
De ' h-scherm ”-klasse in Tailwind wordt gebruikt om de Viewport-hoogte toe te wijzen aan een element, d.w.z. de hoogte van het scherm van de klant. De ... gebruiken ' h-scherm ”klasse, neemt het element automatisch de schermhoogte over. Om de viewporthoogte in Tailwind te gebruiken, moet de “ h-scherm ” eigenschap moet worden doorgegeven als een waarde voor de “ klas ' attribuut zoals '< div class= “h-scherm ”>”. In dit artikel wordt de procedure beschreven voor het gebruik van de “ h-scherm ” les in Tailwind.