A ' h-képernyő ” osztály a Tailwindben a nézetablak magasságának hozzárendelésére szolgál egy HTML-elemhez. A Viewport csak egy másik neve az ügyfél képernyőméretének. A fejlesztő egyszerűen kiválaszthatja a teljes nézetablakot ezzel a ' h-képernyő ” osztályba, majd ennek megfelelően alkalmazzon több Tailwind osztályt.
Ez a cikk bemutatja a nézetablak magasságának hozzáadását egy elemhez a Tailwind programban a ' h-képernyő ' osztály.
Hogyan állítsuk be egy elem nézetablakának magasságát a „h-screen” osztály használatával Tailwindben?
Ha egy elemhez a nézetablak magasságát a „ h-képernyő ” osztályban, automatikusan beállítja magasságát az ügyfél képernyőjének megfelelően. A nézetablak magasságának hátszélben való használatához kövesse az alábbi konvenciót:
< div osztály = 'h-screen' > Helló < / div >
A fenti demonstrációból egyértelmű, hogy a „ h-képernyő ” az elem class attribútumában használatos számos más Tailwind osztály mellett az elrendezés megtervezéséhez.
Hozzunk létre egy hamis műszerfalat, és adjunk nézetablak magasságot az irányítópult képernyő oldalsávjának.
< div osztály = 'Flex' >
< div osztály = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Irányítópult
< ul osztály = 'text-lg py-8 space-y-7' >
< hogy > Csapat< / hogy >
< hogy >Projektek< / hogy >
< hogy >Jelentések< / hogy >
< hogy >Dokumentumok< / hogy >
< / ul >
< / div >
< div osztály = 'text-center text-3xl py-8 ps-5' >Üdvözöljük az irányítópulton!< / div >
< / div >
A kód magyarázata:
- Először egy „ div ' elem jön létre, amelynek osztálya ' Flex ”, ez az osztály vízszintes vonalba igazítja a lakó elemeket.
- Ezután hozzon létre egy másik ' div ' 8 képpontos felső és alsó párnázással a ' py-2 ” osztályt, és rendeljen hozzá egy rögzített szélességet a „ w-56 ' osztály. Ezután állítsa be az elem magasságát a nézetablak magasságára a „ h-képernyő ' osztály. A tartály sarkai lekerekítettek.
- A ' bg-{color}-{number} ” osztály a tároló háttérszínének biztosítására szolgál. A ' szövegközpont ” osztály középre igazítja a szöveges tartalmat. A szöveg betűsúlya a következőre van állítva bátor ', a betűméret pedig ' 2xl ”.
- Ezután egy rendezetlen lista „< ul >” nagy betűmérettel és egy „ 48 képpont ” margin-top a „space-y” hátszél osztály használatával.
- Ezután négy listaelem jön létre a „<” használatával hogy >” címkéket.
- Egy másik ' div ” elem 32 képpontos felső-alsó és 20 képpontos soron belüli kitöltéssel jön létre a „ py” és „ps ” osztályok.
A fent magyarázott kód kimenete a következő:
A fenti kimenetből egyértelmű, hogy a műszerfal oldalsávja a képernyő nézetablakának magasságával rendelkezik. Ez az egész a ' h-képernyő ” osztály a Tailwindben.
Következtetés
A ' h-képernyő ” osztály a Tailwindben arra szolgál, hogy hozzárendelje a nézetablak magasságát egy elemhez, azaz a kliens képernyőjének magasságához. Használni a ' h-képernyő ” osztályba, az elem automatikusan örökli a képernyő magasságát. A nézetablak magasságának hátszélben való használatához a „ h-képernyő ' tulajdonságot értékként kell átadni a ' osztály ” attribútum, például „< div class= “h-screen ”>”. Ez a cikk ismerteti a „ h-képernyő ” osztály a Tailwindben.