Det ' h-skærm ” klasse i Tailwind bruges til at tildele viewport-højden til et HTML-element. Viewport er blot et andet navn for en klients skærmstørrelse. Udvikleren kan nemt vælge hele viewporten ved hjælp af denne ' h-skærm ” klasse og derefter anvende flere Tailwind klasser i overensstemmelse hermed.
Denne artikel vil give proceduren til at tilføje viewport-højden til et element i Tailwind ved hjælp af ' h-skærm ' klasse.
Hvordan indstilles en viewport-højde på et element ved hjælp af 'h-screen'-klassen i Tailwind?
Hvis et element er tildelt visningsportens højde ved hjælp af ' h-skærm ” klasse, vil den automatisk justere sin højdeegenskab i henhold til klientens skærm. Følg nedenstående konvention for at bruge udsigtshøjden i Tailwind:
< div klasse = 'h-skærm' > Hej < / div >
Fra ovenstående demonstration er det klart, at ' h-skærm ” bruges i elementets klasseattribut sammen med forskellige andre Tailwind-klasser til at designe layoutet.
Lad os oprette et dummy-dashboard og give en viewport-højde til sidebjælken på dashboard-skærmen.
< div klasse = 'fleks' >
< div klasse = 'w-56 h-skærm afrundet-lg bg-blå-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Dashboard
< ul klasse = 'text-lg py-8 space-y-7' >
< at >hold< / at >
< at >Projekter< / at >
< at >Rapporter< / at >
< at >Dokumenter< / at >
< / ul >
< / div >
< div klasse = 'text-center text-3xl py-8 ps-5' >Velkommen til The Dashboard!< / div >
< / div >
Forklaring af koden:
- Først en ' div ' element er oprettet med klassen ' bøje ”, justerer denne klasse de resterende elementer i en vandret linje.
- Dernæst skal du oprette en anden ' div ' med 8px top- og bundpolstring ved hjælp af ' py-2 '-klassen og tildel den en fast bredde ved hjælp af ' w-56 ' klasse. Indstil derefter elementets højde til visningsportens højde med ' h-skærm ' klasse. Beholderens hjørner er indstillet til afrundede.
- Det ' bg-{color}-{number} ” klasse bruges til at give en baggrundsfarve til beholderen. Det ' tekst-center ” klasse justerer tekstindholdet til midten. Skrifttypevægten for teksten er sat til ' fremhævet ', og skriftstørrelsen er ' 2xl ”.
- Dernæst en uordnet liste '< ul >' er oprettet med stor skriftstørrelse og et ' 48px ” margin-top ved hjælp af “space-y” medvindsklassen.
- Derefter oprettes fire listeelementer ved hjælp af '< at >” tags.
- En anden ' div '-elementet oprettes med 32px top-bund og 20px inline-start-polstring ved hjælp af ' py' og 'ps ” klasser.
Outputtet for den ovenfor forklarede kode er som følger:
Fra ovenstående output er det tydeligt, at dashboard-sidebjælken har visningsportens højde på skærmen. Det handler alt sammen om formålet med ' h-skærm ” klasse i medvind.
Konklusion
Det ' h-skærm ” klasse i Tailwind bruges til at tildele Viewport-højden til et element, dvs. højden på klientens skærm. Bruger ' h-skærm ” klasse, vil elementet automatisk arve skærmhøjden. For at bruge viewport-højden i Tailwind, ' h-skærm ' egenskab skal videregives som en værdi for ' klasse ' attribut som '< div class= “h-skærm ”>”. Denne artikel indeholder proceduren for brug af ' h-skærm ” klasse i medvind.