' h-ekraan ” klassi Tailwindis kasutatakse vaateava kõrguse määramiseks HTML-elemendile. Vaateport on lihtsalt teine nimi kliendi ekraani suurusele. Selle abil saab arendaja hõlpsasti valida kogu vaateava h-ekraan ” klassi ja seejärel rakendada vastavalt mitu Tailwindi klassi.
See artikkel pakub protseduuri Tailwindis elemendile vaateava kõrguse lisamiseks, kasutades ' h-ekraan ” klass.
Kuidas määrata elemendi vaateakna kõrgust, kasutades Tailwindis klassi 'h-screen'?
Kui elemendile on määratud vaateava kõrgus, kasutades ' h-ekraan ” klassis, kohandab see automaatselt oma kõrguse omadust vastavalt kliendi ekraanile. Vaateava kõrguse kasutamiseks Tailwindis järgige allolevat tava:
< div klass = 'h-ekraan' > Tere < / div >
Ülaltoodud demonstratsioonist on selge, et ' h-ekraan ” kasutatakse elemendi klassi atribuudis koos paljude teiste Tailwindi klassidega paigutuse kujundamisel.
Loome näiva armatuurlaua ja anname armatuurlaua ekraani külgribale vaateava kõrguse.
< div klass = 'flex' >
< div klass = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Armatuurlaud
< ul klass = 'text-lg py-8 space-y-7' >
< et >Meeskond< / et >
< et >Projektid< / et >
< et >Aruanded< / et >
< et >Dokumendid< / et >
< / ul >
< / div >
< div klass = 'tekstikeskuse tekst-3xl py-8 ps-5' >Tere tulemast juhtpaneelile!< / div >
< / div >
Koodi selgitus:
- Esiteks, ' div ' element luuakse klassiga ' painduv ”, see klass joondab olemasolevad üksused horisontaalselt.
- Järgmisena looge teine ' div 8 pikslit ülemise ja alumise polsterdusega, kasutades nuppu py-2 ' klassi ja määrake sellele kindel laius, kasutades ' w-56 ” klass. Järgmisena määrake elemendi kõrgus vaateava kõrgusele nupuga ' h-ekraan ” klass. Mahuti nurgad on ümardatud.
- ' bg-{color}-{number} ” klassi kasutatakse konteineri taustavärvi andmiseks. ' tekstikeskus ” klass joondab teksti sisu keskele. Teksti fondi kaaluks on määratud ' julge ja fondi suurus on ' 2xl ”.
- Järgmisena ilmub järjestamata loend „< ul >” luuakse suure kirjasuurusega ja „ 48 pikslit ” margin-top kasutades “space-y” taganttuule klassi.
- Seejärel luuakse neli loendiüksust, kasutades nuppu “< et >” sildid.
- Teine ' div ” element luuakse 32 piksli suuruse ülevalt-alt ja 20 pikslise reasisese täidisega, kasutades „ py” ja „ps ” klassid.
Ülalkirjeldatud koodi väljund on järgmine:
Ülaltoodud väljundist on selge, et armatuurlaua külgribal on ekraani vaateava kõrgus. See kõik on seotud ' h-ekraan ” klassis Tailtuules.
Järeldus
' h-ekraan ” klassi Tailwindis kasutatakse vaateava kõrguse määramiseks elemendile, st kliendi ekraani kõrgusele. Kasutades ' h-ekraan ” klassi, pärib element automaatselt ekraani kõrguse. Vaateava kõrguse kasutamiseks taganttuules, h-ekraan ' atribuut tuleb edastada väärtusena klass ” atribuut nagu „< div class= “h-ekraan ”>”. See artikkel pakub protseduuri ' h-ekraan ” klassis Tailtuules.