' h-obrazovka Třída ” v Tailwind se používá k přiřazení výšky výřezu prvku HTML. Viewport je jen jiný název pro velikost obrazovky klienta. Vývojář může snadno vybrat celý výřez pomocí tohoto „ h-obrazovka ” a poté podle toho použijte několik tříd Tailwind.
Tento článek poskytuje postup pro přidání výšky výřezu k prvku v Tailwind pomocí „ h-obrazovka “třída.
Jak nastavit výšku výřezu prvku pomocí třídy „h-screen“ v Tailwind?
Pokud je prvku přiřazena výška výřezu pomocí „ h-obrazovka ”, automaticky upraví svou vlastnost výšky podle obrazovky klienta. Chcete-li v Tailwindu použít výšku zobrazované oblasti, postupujte podle níže uvedené konvence:
< div třída = 'h-screen' > Ahoj < / div >
Z výše uvedené ukázky je zřejmé, že „ h-obrazovka ” se používá v atributu class prvku spolu s různými dalšími třídami Tailwind pro návrh rozvržení.
Vytvořme fiktivní řídicí panel a postrannímu panelu na obrazovce řídicího panelu dáme výšku zobrazovacího pole.
< div třída = 'flex' >
< div třída = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Palubní deska
< ul třída = 'text-lg py-8 mezera-y-7' >
< že >Tým< / že >
< že >Projekty< / že >
< že >Přehledy< / že >
< že >Dokumenty< / že >
< / ul >
< / div >
< div třída = 'text-center text-3xl py-8 ps-5' >Vítejte na hlavním panelu!< / div >
< / div >
Vysvětlení kódu:
- Za prvé, „ div 'prvek je vytvořen s třídou ' flex “, tato třída zarovná rezidenční položky do vodorovné čáry.
- Dále vytvořte další „ div “ s 8px horním a spodním odsazením pomocí “ py-2 ” a přidělte jí pevnou šířku pomocí “ w-56 “třída. Dále nastavte výšku prvku na výšku výřezu pomocí „ h-obrazovka “třída. Rohy nádoby jsou nastaveny na zaoblené.
- ' bg-{barva}-{číslo} ” se používá k poskytnutí barvy pozadí kontejneru. ' textové centrum ” zarovná obsah textu na střed. Tloušťka písma pro text je nastavena na „ tučně “ a velikost písma je „ 2xl “.
- Dále neuspořádaný seznam „< ul >“ je vytvořen s velkou velikostí písma a „ 48 pixelů ” margin-top s použitím třídy zadního větru „space-y“.
- Poté se vytvoří čtyři položky seznamu pomocí „< že >“ značky.
- Další ' div ” prvek je vytvořen s 32px horní-dolní a 20px inline-start padding pomocí ' py“ a „ps ' třídy.
Výstup pro výše vysvětlený kód je následující:
Z výše uvedeného výstupu je zřejmé, že postranní panel palubní desky má výšku výřezu obrazovky. To je vše o účelu „ h-obrazovka třídy v Tailwindu.
Závěr
' h-obrazovka Třída ” v Tailwind se používá k přiřazení výšky zobrazení k prvku, tj. výšce obrazovky klienta. Za použití ' h-obrazovka ” třídy, prvek automaticky zdědí výšku obrazovky. Chcete-li použít výšku zobrazované oblasti v Tailwindu, h-obrazovka ” vlastnost musí být předána jako hodnota pro “ třída ” atribut jako “< div class= “h-screen '>'. Tento článek poskytuje postup pro použití „ h-obrazovka třídy v Tailwindu.