« h-экран Класс ” в Tailwind используется для назначения высоты области просмотра HTML-элементу. Viewport — это просто другое название размера экрана клиента. Разработчик может легко выбрать весь область просмотра с помощью этого « h-экран » и затем соответствующим образом применить несколько классов Tailwind.
В этой статье будет описана процедура добавления высоты области просмотра к элементу в Tailwind с помощью « h-экран ' сорт.
Как установить высоту области просмотра элемента, используя класс «h-screen» в Tailwind?
Если элементу назначена высота области просмотра с помощью параметра « h-экран », он автоматически настроит свое свойство высоты в соответствии с экраном клиента. Чтобы использовать высоту области просмотра в Tailwind, следуйте приведенному ниже соглашению:
< div сорт '=' 'h-экран' > Привет < / div >
Из приведенной выше демонстрации ясно, что « h-экран используется в атрибуте class элемента вместе с различными другими классами Tailwind для разработки макета.
Давайте создадим фиктивную панель мониторинга и зададим высоту области просмотра боковой панели экрана панели мониторинга.
< div сорт '=' 'гибкий' >
< div сорт '=' 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl шрифт-жирный' >Панель управления
< ул сорт '=' 'текст-lg py-8 пробел-y-7' >
< что >Команда< / что >
< что >Проекты< / что >
< что >Отчеты< / что >
< что >Документы< / что >
< / ул >
< / div >
< div сорт '=' 'текст-центр текст-3xl py-8 PS-5' >Добро пожаловать в личный кабинет!< / div >
< / div >
Пояснение кода:
- Первый ' div элемент создается с классом « гибкий », этот класс выравнивает находящиеся элементы по горизонтальной линии.
- Далее создайте еще один « div » с верхним и нижним отступом размером 8 пикселей, используя « ру-2 ” и выделите ему фиксированную ширину, используя “ w-56 ' сорт. Затем установите высоту элемента на высоту области просмотра с помощью « h-экран ' сорт. Углы контейнера закруглены.
- « bg-{цвет}-{число} Класс ” используется для предоставления цвета фона контейнеру. « текстовый центр Класс ” выравнивает текстовое содержимое по центру. Размер шрифта для текста установлен на « смелый », а размер шрифта – « 2xl ».
- Далее неупорядоченный список «< ул >» создается с большим размером шрифта и « 48 пикселей «margin-top», используя класс попутного ветра «space-y».
- Затем создаются четыре элемента списка с использованием «< что >» теги.
- Другой ' div Элемент создается с отступом сверху-снизу размером 32 пикселя и начальным значением 20 пикселей с использованием параметра « py» и «пс » занятия.
Вывод описанного выше кода выглядит следующим образом:
Из приведенного выше вывода ясно, что боковая панель информационной панели имеет высоту области просмотра экрана. Вот и все, что касается цели « h-экран Класс в Tailwind.
Заключение
« h-экран Класс » в Tailwind используется для назначения высоты области просмотра элементу, то есть высоте экрана клиента. Используя ' h-экран », элемент автоматически унаследует высоту экрана. Чтобы использовать высоту области просмотра в Tailwind, h-экран Свойство ” должно быть передано как значение для свойства “ сорт атрибут типа «< div class = «h-экран ”>”. В данной статье предусмотрен порядок использования « h-экран Класс в Tailwind.