« h-skjerm ” klasse i Tailwind brukes til å tilordne viewport-høyden til et HTML-element. Viewport er bare et annet navn for en klients skjermstørrelse. Utvikleren kan enkelt velge hele visningsporten ved hjelp av denne ' h-skjerm ” klasse og deretter bruke flere Tailwind-klasser deretter.
Denne artikkelen vil gi prosedyren for å legge til viewport-høyden til et element i Tailwind ved å bruke ' h-skjerm ' klasse.
Hvordan stille inn en viewport-høyde på et element ved å bruke 'h-screen'-klassen i Tailwind?
Hvis et element er tildelt visningsporthøyden ved å bruke ' h-skjerm ” klasse, vil den automatisk justere høydeegenskapen i henhold til klientens skjerm. For å bruke visningsportens høyde i Tailwind, følg konvensjonen nedenfor:
< div klasse = 'h-skjerm' > Hallo < / div >
Fra demonstrasjonen ovenfor er det klart at ' h-skjerm ” brukes i klasseattributtet til elementet sammen med forskjellige andre Tailwind-klasser for å designe layouten.
La oss lage et dummy-dashbord, og gi en viewport-høyde til sidefeltet på dashboard-skjermen.
< div klasse = 'fleks' >
< div klasse = 'w-56 h-skjerm avrundet-lg bg-blå-600 tekstsenter tekst-cyan-50 py-6 tekst-2xl font-fet' > Dashboard
< ul klasse = 'text-lg py-8 space-y-7' >
< at >Team< / at >
< at >Prosjekter< / at >
< at >Rapporter< / at >
< at >Dokumenter< / at >
< / ul >
< / div >
< div klasse = 'tekstsenter tekst-3xl py-8 ps-5' >Velkommen til The Dashboard!< / div >
< / div >
Forklaring av koden:
- Først en ' div '-elementet er opprettet med klassen ' bøye seg ”, justerer denne klassen de gjenværende elementene i en horisontal linje.
- Deretter oppretter du en annen ' div ' med 8 px topp- og bunnpolstring ved å bruke ' py-2 '-klassen og tilordne den en fast bredde ved å bruke ' w-56 ' klasse. Deretter setter du elementets høyde til visningsportens høyde med ' h-skjerm ' klasse. Hjørnene på beholderen er satt til avrundede.
- « bg-{color}-{number} ” klasse brukes til å gi en bakgrunnsfarge til beholderen. « tekst-senter ” klasse justerer tekstinnholdet til midten. Skriftvekten for teksten er satt til ' dristig ', og skriftstørrelsen er ' 2xl '.
- Deretter kommer en uordnet liste «< ul >' er laget med stor skriftstørrelse og en ' 48px ” margin-top ved bruk av “space-y” medvindsklassen.
- Deretter opprettes fire listeelementer ved å bruke «< at >”-tagger.
- En annen ' div '-elementet er opprettet med 32px topp-bunn og 20px inline-start-polstring ved å bruke ' py' og 'ps ' klasser.
Utdataene for den ovenfor forklarte koden er som følger:
Fra utgangen ovenfor er det tydelig at sidepanelet på dashbordet har visningsportens høyde på skjermen. Det handler om formålet med ' h-skjerm ” klasse i Tailwind.
Konklusjon
« h-skjerm ”-klassen i Tailwind brukes til å tilordne Viewport-høyden til et element, dvs. høyden på klientens skjerm. Bruker ' h-skjerm ” klasse, vil elementet automatisk arve skjermhøyden. For å bruke viewport-høyden i Tailwind, ' h-skjerm egenskapen må sendes som en verdi for klasse ' attributt som '< div class= “h-skjerm ”>”. Denne artikkelen har gitt fremgangsmåten for bruk av ' h-skjerm ” klasse i Tailwind.