„ h-екран ” клас в Tailwind се използва за присвояване на височината на прозореца за изглед на HTML елемент. Viewport е просто друго име за размера на екрана на клиента. Програмистът може лесно да избере целия прозорец с помощта на това „ h-екран ” и след това съответно приложете няколко класа Tailwind.
Тази статия ще предостави процедурата за добавяне на височината на прозореца за изглед към елемент в Tailwind с помощта на „ h-екран ” клас.
Как да зададете височина на Viewport на елемент с помощта на класа „h-screen“ в Tailwind?
Ако на елемент е присвоена височината на прозореца за изглед с помощта на „ h-екран ”, той автоматично ще коригира свойството си за височина според екрана на клиента. За да използвате височината на прозореца за изглед в Tailwind, следвайте предоставената по-долу конвенция:
< див клас = 'h-екран' > Здравейте < / див >
От горната демонстрация става ясно, че „ h-екран ” се използва в атрибута на класа на елемента заедно с различни други класове на Tailwind за проектиране на оформлението.
Нека създадем фиктивно табло за управление и да зададем височина на прозореца за изглед на страничната лента на екрана на таблото за управление.
< див клас = 'гъвкав' >
< див клас = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Табло за управление
< ул клас = 'текст-lg py-8 интервал-y-7' >
< че >Екип< / че >
< че >Проекти< / че >
< че >Доклади< / че >
< че >Документи< / че >
< / ул >
< / див >
< див клас = 'текст-център текст-3xl py-8 ps-5' >Добре дошли в таблото за управление!< / див >
< / див >
Обяснение на кода:
- Първо, „ див ” е създаден елемент с класа на „ flex ”, този клас подравнява пребиваващите елементи в хоризонтална линия.
- След това създайте друг „ див ” с 8px горна и долна подложка с помощта на „ py-2 ” и му задайте фиксирана ширина с помощта на „ w-56 ” клас. След това задайте височината на елемента на височината на прозореца за изглед с „ h-екран ” клас. Ъглите на контейнера са заоблени.
- „ bg-{цвят}-{номер} ” се използва за предоставяне на фонов цвят на контейнера. „ текстов център ” клас подравнява текстовото съдържание към центъра. Теглото на шрифта за текста е зададено на „ удебелен “, а размерът на шрифта е „ 2xl ”.
- След това, неподреден списък „< ул >“ се създава с голям размер на шрифта и „ 48px ” margin-top, използвайки класа за попътен вятър „space-y”.
- След това се създават четири елемента от списък с помощта на „< че >” етикети.
- Друг ' див ” е създаден с 32px горно-долно и 20px вградено начално подложка с помощта на „ py“ и „ps ” класове.
Резултатът за гореобяснения код е както следва:
От горния изход става ясно, че страничната лента на таблото има височината на прозореца за изглед на екрана. Това е всичко относно целта на „ h-екран ” клас в Tailwind.
Заключение
„ h-екран ” клас в Tailwind се използва за присвояване на височината на Viewport към елемент, т.е. височината на екрана на клиента. Използвайки ' h-екран ”, елементът автоматично ще наследи височината на екрана. За да използвате височината на прозореца за изглед в Tailwind, „ h-екран ” трябва да бъде предадено като стойност за „ клас ” като „< div class= “h-екран ”>”. Тази статия предоставя процедурата за използване на „ h-екран ” клас в Tailwind.