Тази статия ще предостави процедурата за прилагане на свойството за минимална височина към Hover, Focus и други състояния в Tailwind.
Забележка: За да научите повече за класовете на минимална височина в Tailwind, прочетете това статия на нашия уебсайт.
Как да приложите свойството Min-height към Hover, Focus и други състояния в Tailwind?
Tailwind предоставя варианти на състояние по подразбиране, които могат да бъдат предоставени със свойствата на дизайна. Тези варианти на състояние включват „задържане“, „фокус“ и „активен“. Описанието на тези варианти на състояние е както следва:
- „ завъртане ” състояние се задейства всеки път, когато курсорът на мишката задържи върху елемент.
- „ фокус ” състояние се задейства всеки път, когато елементът е на фокус.
- „ активен ” се задейства всеки път, когато елементът се активира или щракне върху него.
Нека използваме свойството за минимална височина с всяко от тези състояния едно по едно.
Използване на свойството за минимална височина със състояние на задържане
За да използвате „ минимална височина ” с вариант на състояние на задържане в Tailwind, се използва следният синтаксис:
< див клас = 'hover:min-h-{size}...' > < / див >
Нека използваме дефинирания по-горе синтаксис в демонстрация. В този пример ще увеличим минималната височина на елемент всеки път, когато курсорът на мишката задържи над елемента.
< див клас = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Задръжте курсора на мишката, за да увеличите минимума височина < / див >Обяснението на горния код е както следва:
- „ min-w-fit ” клас задава минималната граница на височината до височината, изисквана от елемента div, за да пасне на съдържанието му.
- „ завъртане на мишката: min-w-screen ” ще осигури минимално ограничение на височината, равно на 100% от размера на екрана.
- „ заоблен-мд ', ' bg-{цвят}-{номер} ', ' текстов център ', и ' текст-бял ” класовете отговарят съответно за заоблените ъгли, цвета на фона, централно подравнения текст и белия цвят на текста за елемента div. ъглите на елемента div са заоблени.
Изход:
От изхода по-долу става ясно, че минималната височина на елемента се увеличава до 100% от размера на екрана, когато курсорът на мишката се движи над него.
Използване на свойството за минимална височина със състояние на фокус
За да използвате „ минимална височина ” със състоянието на фокус в Tailwind, се използва следният синтаксис:
< див клас = 'фокус: мин-ч-{размер}...' > < / див >Нека използваме дефинирания по-горе синтаксис в демонстрация. В този пример минималната височина на поле за въвеждане ще се увеличи, когато потребителят се фокусира върху него.
< вход контейнер = „Фокус върху това поле за въвеждане“ клас = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 text-center focus:min-h-[35%]' >< / вход >Обяснението на горния код е както следва:
- един „ вход ” се създава поле с някакъв текст в атрибута за контейнер.
- Осигурено е ограничение за минимална височина от 0px с помощта на „ min-h-0 ” клас. И така, разработчикът зададе височината по подразбиране на елемента, равна на височината, необходима за пасване на съдържанието, използвайки „ h-fit ” клас.
- „ фокус: min-h-[35%] ” ще увеличи ограничението за минимална височина на полето за въвеждане, когато потребителят се фокусира върху него.
Изход:
От изхода по-долу става ясно, че височината на полето за въвеждане се увеличава, когато потребителят се фокусира върху него. Това е така, защото ограничението за минимална височина се увеличава от 0px до 35% от височината на екрана.
Използване на свойство за минимална височина с активно състояние в Tailwind
За да използвате „ минимална височина ” с активния вариант на състояние в Tailwind, се използва следният синтаксис:
< див клас = 'активен: мин-ч-{размер}...' > < / див >Нека използваме дефинирания по-горе синтаксис в демонстрация. В този пример минималната височина на бутона ще се увеличи, когато потребителят активно щракне върху него.
< бутон клас = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Щракнете за увеличаване Височина < / бутон >Създава се бутон с ограничение за минимална височина от 0px. Въпреки това, използвайки „ активен: мин-ч-[35%] ” ограничението за минимална височина ще се увеличи от 0px до 35% от размера на екрана при всяко щракване върху бутона.
Изход:
Може да се види в следния изход, че минималната височина на бутона се увеличава, когато потребителят щракне върху него.
Това е всичко за прилагане на свойството за минимална височина към Tailwind, фокусиране и други състояния в Tailwind.
Заключение
Вариантите на състоянието, като например задържане на мишката, фокус и активен в Tailwind, позволяват на потребителите да създават динамични оформления на дизайна. За да използвате минималния клас на височина с варианти на състояние в Tailwind, „ курсор: мин-ч-{стойност} ', ' фокус: min-h-{стойност} ', и ' активен:мин-ч-{стойност} ” се използват класове. Тази статия предоставя процедурата за прилагане на задържане, фокусиране и други състояния с минималния клас на височина в Tailwind.