' h-zaslon ” klasa u Tailwindu koristi se za dodjeljivanje visine prozora HTML elementu. Viewport je samo drugo ime za veličinu zaslona klijenta. Programer može jednostavno odabrati cijeli okvir za prikaz uz pomoć ovog ' h-zaslon ”, a zatim prema tome primijenite nekoliko klasa Tailwind.
Ovaj članak će pružiti postupak za dodavanje visine prozora elementu u Tailwindu pomoću ' h-zaslon ” razred.
Kako postaviti visinu okvira za prikaz elementa pomoću klase 'h-screen' u Tailwindu?
Ako je elementu dodijeljena visina prozora pomoću ' h-zaslon ”, automatski će prilagoditi svojstvo visine u skladu s klijentovim zaslonom. Kako biste koristili visinu okvira za prikaz u Tailwindu, slijedite dolje navedenu konvenciju:
< div razreda = 'h-zaslon' > zdravo < / div >
Iz gornje demonstracije jasno je da je ' h-zaslon ” koristi se u atributu klase elementa zajedno s raznim drugim klasama Tailwind za dizajniranje izgleda.
Stvorimo lažnu nadzornu ploču i dodijelimo visinu prikaza bočnoj traci zaslona nadzorne ploče.
< div razreda = 'savijati' >
< div razreda = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' >Upravljačka ploča
< ul razreda = 'tekst-lg py-8 razmak-y-7' >
< da >Tim< / da >
< da >Projekti< / da >
< da >Izvješća< / da >
< da >Dokumenti< / da >
< / ul >
< / div >
< div razreda = 'text-center text-3xl py-8 ps-5' >Dobrodošli na nadzornu ploču!< / div >
< / div >
Objašnjenje koda:
- Prvo, ' div ' element je kreiran imajući klasu ' savijati ”, ova klasa poravnava postojeće stavke u vodoravnu liniju.
- Zatim stvorite još jedan ' div ” s 8 px gornjih i donjih ispuna koristeći “ py-2 ' i dodijelite mu fiksnu širinu pomoću ' w-56 ” razred. Zatim postavite visinu elementa na visinu okvira za prikaz pomoću ' h-zaslon ” razred. Kutovi spremnika su zaobljeni.
- ' bg-{boja}-{broj} ” klasa se koristi za pružanje boje pozadine za spremnik. ' tekst-centar ” klasa poravnava tekstualni sadržaj prema sredini. Težina fonta za tekst postavljena je na ' podebljano ', a veličina fonta je ' 2xl ”.
- Zatim, neuređeni popis “< ul >” stvara se velikom veličinom fonta i znakom “ 48 px ” margin-top koristeći klasu stražnjeg vjetra “space-y”.
- Zatim se pomoću znaka “< da >” oznake.
- Još jedan “ div ” element se stvara s 32 px vrh-dno i 20 px inline-start ispuna pomoću “ py' i 'ps ” razreda.
Izlaz za gore objašnjeni kod je sljedeći:
Iz gornjeg izlaza jasno je da bočna traka nadzorne ploče ima visinu okvira za prikaz zaslona. To je sve o svrsi ' h-zaslon ” razreda u Tailwindu.
Zaključak
' h-zaslon ” klasa u Tailwindu koristi se za dodjeljivanje visine Viewporta elementu, tj. visine klijentova zaslona. Koristiti ' h-zaslon ”, element će automatski naslijediti visinu zaslona. Kako biste koristili visinu okvira za prikaz u Tailwindu, ' h-zaslon ' Svojstvo mora biti proslijeđeno kao vrijednost za ' razreda ” atribut poput “< div class= “h-zaslon ”>”. Ovaj članak je dao postupak za korištenje ' h-zaslon ” razreda u Tailwindu.