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