' h-zaslon ” v Tailwindu se uporablja za dodelitev višine vidnega polja elementu HTML. Viewport je samo drugo ime za velikost zaslona odjemalca. Razvijalec lahko preprosto izbere celotno vidno polje s pomočjo tega ' h-zaslon ” in nato ustrezno uporabite več razredov Tailwind.
Ta članek bo navedel postopek za dodajanje višine vidnega polja elementu v Tailwind z uporabo ' h-zaslon ” razred.
Kako nastaviti višino vidnega polja elementa z uporabo razreda 'h-screen' v Tailwindu?
Če je elementu dodeljena višina vidnega polja z uporabo ' h-zaslon ”, bo samodejno prilagodil lastnost višine glede na odjemalčev zaslon. Če želite uporabiti višino vidnega polja v Tailwindu, upoštevajte spodaj navedeno konvencijo:
< div razred = 'h-zaslon' > zdravo < / div >
Iz zgornje demonstracije je jasno, da je ' h-zaslon ” se uporablja v atributu razreda elementa skupaj z različnimi drugimi razredi Tailwind za načrtovanje postavitve.
Ustvarimo navidezno nadzorno ploščo in stranski vrstici zaslona nadzorne plošče določimo višino vidnega polja.
< div razred = 'flex' >
< div razred = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Nadzorna plošča
< ul razred = 'besedilo-lg py-8 presledek-y-7' >
< to >Ekipa< / to >
< to >Projekti< / to >
< to >Poročila< / to >
< to >Dokumenti< / to >
< / ul >
< / div >
< div razred = 'text-center text-3xl py-8 ps-5' >Dobrodošli na nadzorni plošči!< / div >
< / div >
Razlaga kode:
- Prvič, ' div ' element je ustvarjen z razredom ' flex ”, ta razred poravna bivalne elemente v vodoravno črto.
- Nato ustvarite še en ' div « z 8 slikovnimi pikami zgornjega in spodnjega oblazinjenja z uporabo » py-2 « in mu dodelite fiksno širino z uporabo » w-56 ” razred. Nato nastavite višino elementa na višino vidnega polja z ' h-zaslon ” razred. Vogali posode so zaobljeni.
- ' bg-{barva}-{številka} ” se uporablja za zagotavljanje barve ozadja za vsebnik. ' besedilno središče ” poravna vsebino besedila na sredino. Teža pisave za besedilo je nastavljena na ' krepko «, velikost pisave pa je » 2xl ”.
- Nato sledi neurejen seznam »< ul >« je ustvarjen z veliko velikostjo pisave in » 48 slikovnih pik ” margin-top z uporabo razreda hrbtnega vetra “space-y”.
- Nato se z uporabo znaka »< to >” oznake.
- Še en ' div ” je ustvarjen z 32 slikovnimi pikami zgoraj-spodaj in 20 slikovnimi pikami v začetnem odmiku z uporabo “ py« in »ps ” razrede.
Izhod za zgoraj razloženo kodo je naslednji:
Iz zgornjega rezultata je jasno, da ima stranska vrstica nadzorne plošče višino vidnega polja zaslona. To je vse o namenu ' h-zaslon ” razreda v Tailwindu.
Zaključek
' h-zaslon ” v Tailwindu se uporablja za dodelitev višine Viewport elementu, tj. višine odjemalčevega zaslona. Uporabljati ' h-zaslon ”, bo element samodejno podedoval višino zaslona. Če želite uporabiti višino vidnega okna v Tailwindu, je » h-zaslon Lastnost je treba posredovati kot vrednost za razred «, kot je »< div class= “h-screen ”>”. V tem članku je opisan postopek za uporabo » h-zaslon ” razreda v Tailwindu.