Ang ' h-screen Ang klase ng ” sa Tailwind ay ginagamit upang italaga ang taas ng viewport sa isang elemento ng HTML. Ang Viewport ay isa lamang pangalan para sa laki ng screen ng isang kliyente. Madaling mapipili ng developer ang buong viewport sa tulong nitong ' h-screen ” klase at pagkatapos ay ilapat ang ilang klase ng Tailwind nang naaayon.
Ibibigay ng artikulong ito ang pamamaraan para sa pagdaragdag ng taas ng viewport sa isang elemento sa Tailwind gamit ang “ h-screen ” klase.
Paano Magtakda ng Taas ng Viewport ng isang Elemento Gamit ang Klase ng 'h-screen' sa Tailwind?
Kung ang isang elemento ay itinalaga ang taas ng viewport gamit ang ' h-screen ” class, awtomatiko nitong ia-adjust ang height property nito ayon sa screen ng kliyente. Para magamit ang taas ng viewport sa Tailwind, sundin ang convention na ibinigay sa ibaba:
< div klase = 'h-screen' > Kamusta < / div >
Mula sa pagpapakita sa itaas, malinaw na ang ' h-screen Ang ” ay ginagamit sa katangian ng klase ng elemento kasama ng iba't ibang klase ng Tailwind para sa pagdidisenyo ng layout.
Gumawa tayo ng dummy dashboard, at bigyan ng taas ng viewport ang sidebar ng screen ng dashboard.
< div klase = 'flex' >
< div klase = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' >Dashboard
< ul klase = 'text-lg py-8 space-y-7' >
< na >Pangkat< / na >
< na >Mga Proyekto< / na >
< na >Mga Ulat< / na >
< na >Mga Dokumento< / na >
< / ul >
< / div >
< div klase = 'text-center text-3xl py-8 ps-5' >Welcome sa The Dashboard!< / div >
< / div >
Paliwanag ng code:
- Una, isang ' div 'Ang elemento ay nilikha na may klase ng ' baluktot ”, inihanay ng klase na ito ang mga naninirahan na item sa isang pahalang na linya.
- Susunod, lumikha ng isa pang ' div ” na may 8px ng itaas at ibabang padding gamit ang “ py-2 ” class at ilaan ito ng isang nakapirming lapad gamit ang “ w-56 ” klase. Susunod, itakda ang taas ng elemento sa taas ng viewport na may ' h-screen ” klase. Ang mga sulok ng lalagyan ay nakatakda sa bilugan.
- Ang ' bg-{color}-{number} Ang klase ay ginagamit upang magbigay ng kulay ng background sa lalagyan. Ang ' text-center ” class na inihanay ang nilalaman ng teksto sa gitna. Ang font-weight para sa teksto ay nakatakda sa “ matapang ”, at ang laki ng font ay “ 2xl ”.
- Susunod, isang hindi nakaayos na listahang “< ul >' ay nilikha na may malaking laki ng font at isang ' 48px ” margin-top gamit ang “space-y” tailwind class.
- Pagkatapos, apat na listahan ng mga item ang nilikha gamit ang '< na >” mga tag.
- Isa pa ' div Ang elementong ” ay ginawa gamit ang 32px top-bottom at 20px inline-start padding gamit ang “ py' at 'ps ” mga klase.
Ang output para sa ipinaliwanag na code sa itaas ay ang mga sumusunod:
Mula sa output sa itaas, malinaw na ang sidebar ng dashboard ay may taas ng viewport ng screen. Iyon ay tungkol sa layunin ng ' h-screen ” klase sa Tailwind.
Konklusyon
Ang ' h-screen Ang klase ng ” sa Tailwind ay ginagamit upang italaga ang taas ng Viewport sa isang elemento i.e. ang taas ng screen ng kliyente. Gamit ang ' h-screen ” class, awtomatikong mamanahin ng elemento ang taas ng screen. Upang magamit ang taas ng viewport sa Tailwind, ang ' h-screen 'Ang ari-arian ay kailangang maipasa bilang isang halaga para sa ' klase ” attribute tulad ng “< div class= “h-screen ”>”. Ang artikulong ito ay nagbigay ng pamamaraan para sa paggamit ng “ h-screen ” klase sa Tailwind.