' h-obrazovka ” v Tailwinde sa používa na priradenie výšky výrezu k prvku HTML. Viewport je len iný názov pre veľkosť obrazovky klienta. Vývojár môže jednoducho vybrať celý výrez pomocou tohto „ h-obrazovka ” a následne použite niekoľko tried Tailwind.
Tento článok poskytuje postup na pridanie výšky zobrazovanej oblasti k prvku v Tailwind pomocou „ h-obrazovka ' trieda.
Ako nastaviť výšku výrezu prvku pomocou triedy „h-screen“ v Tailwind?
Ak je prvku priradená výška výrezu pomocou „ h-obrazovka ”, automaticky upraví svoju vlastnosť výšky podľa obrazovky klienta. Ak chcete použiť výšku zobrazenej oblasti v Tailwinde, postupujte podľa nižšie uvedenej konvencie:
< div trieda = 'h-screen' > Ahoj < / div >
Z vyššie uvedenej demonštrácie je zrejmé, že „ h-obrazovka ” sa používa v atribúte class prvku spolu s rôznymi ďalšími triedami Tailwind na návrh rozloženia.
Vytvorme fiktívnu palubnú dosku a priraďme výšku výrezu bočnej lište obrazovky palubnej dosky.
< div trieda = 'flex' >
< div trieda = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Dashboard
< ul trieda = 'text-lg py-8 medzera-y-7' >
< že >Tím< / že >
< že >Projekty< / že >
< že >Správy< / že >
< že >Dokumenty< / že >
< / ul >
< / div >
< div trieda = 'text-center text-3xl py-8 ps-5' >Vitajte na Dashboarde!< / div >
< / div >
Vysvetlenie kódu:
- Po prvé, „ div Vytvorí sa prvok ” s triedou “ flex “, táto trieda zarovnáva položky v horizontálnej línii.
- Ďalej vytvorte ďalší „ div s 8 pixelmi horného a spodného čalúnenia pomocou „ py-2 ” a prideľte jej pevnú šírku pomocou “ w-56 ' trieda. Ďalej nastavte výšku prvku na výšku výrezu pomocou „ h-obrazovka ' trieda. Rohy nádoby sú nastavené na zaoblené.
- ' bg-{color}-{number} ” sa používa na poskytnutie farby pozadia kontajneru. ' textové centrum ” zarovná obsah textu na stred. Váha písma pre text je nastavená na „ tučný “ a veľkosť písma je „ 2xl “.
- Ďalej neusporiadaný zoznam „< ul >“ je vytvorený s veľkou veľkosťou písma a znakom „ 48 pixelov ” margin-top s použitím triedy zadného vetra „space-y“.
- Potom sa vytvoria štyri položky zoznamu pomocou „< že >“ značky.
- Ďalší ' div ” prvok je vytvorený s 32px vrchným spodným a 20px vloženým odsadením pomocou ' py“ a „ps “triedy.
Výstup pre vyššie vysvetlený kód je nasledujúci:
Z vyššie uvedeného výstupu je zrejmé, že bočný panel prístrojovej dosky má výšku výrezu obrazovky. To je všetko o účele „ h-obrazovka “ triedy v Tailwinde.
Záver
' h-obrazovka ” v Tailwinde sa používa na priradenie výšky zobrazenia k prvku, t. j. výške obrazovky klienta. Pomocou „ h-obrazovka ”, prvok automaticky zdedí výšku obrazovky. Ak chcete použiť výšku výrezu v Tailwinde, h-obrazovka ” vlastnosť musí byť odovzdaná ako hodnota pre “ trieda ” atribút ako “< div class= “h-screen ”>”. Tento článok poskytuje postup na používanie „ h-obrazovka “ triedy v Tailwinde.