В этой статье показано использование наведения, фокуса и других состояний со свойствами положения в Tailwind.
Как использовать Hover, Focus и другие состояния со свойством Position в Tailwind?
Наведение, фокус и другие состояния в Tailwind используются для стилизации элементов Tailwind, обеспечивая привлекательный и удобный интерфейс и привлекательный опыт для пользователей. Иногда свойство позиции необходимо применять для поддержания опыта на самом высоком уровне.
Метод 1: использование варианта наведения со свойством позиции
Вариант при наведении используется для стилизации выбранных элементов, когда пользователь наводит курсор на этот выбранный элемент. « позиция Атрибут ” можно использовать вместе с атрибутом “ зависать », чтобы установить положение до и после наведения. Эта пара используется для создания привлекательного опыта для пользователя.
Шаг 1. Добавьте свойство Hover с позицией в HTML
В приведенном ниже коде свойство hover применяется к свойству позиции на « кнопка элемент:
< тело >
< кнопка сорт '=' 'относительный w-40 h-12 bg-blue-500 hover:абсолютный hover:translate-x-4 hover:translate-y-4 ' >
< п сорт '=' 'текст-белый текстовый центр' > Наведите меня < / п >
< / кнопка >
< / тело >
В этом коде:
- « родственник Класс » устанавливает кнопку относительно родительской страницы.
- « w-40 » устанавливает ширину 40 пикселей.
- « ч-12 » устанавливает высоту 12 пикселей.
- « bg-синий-500 » устанавливает синий цвет фона.
- « наведение: абсолютное » изменяет относительное положение кнопки на абсолютное при наведении на нее курсора мыши.
- « наведите указатель мыши: транслировать-x-4 ” перемещает кнопку на 4 пикселя вправо по оси X и одновременно на 4 пикселя вниз на “ наведите указатель мыши: перевести-y-4 ».
- Текст выравнивается по центру с помощью « текстовый центр ».
Шаг 2: Проверка
Предварительный просмотр веб-страницы, созданной с помощью приведенного выше кода, которая выглядит следующим образом:
Вывод показывает, что элемент был перемещен вправо и вниз на 4 пикселя.
Метод 2: использование варианта фокуса со свойством позиции
Вариант фокуса используется для стилизации HTML-элементов, чтобы привлечь внимание пользователя и выделить некоторые элементы. Позицию также можно применять для позиционирования объекта относительно или абсолютно по отношению к родительской странице. Это сделано для того, чтобы заинтересовать пользователя.
Шаг 1. Добавьте свойство Focus с позицией в HTML.
Создайте HTML-файл и примените свойство фокуса с подходящей позицией. Например, относительное положение применяется к полю ввода в приведенном ниже коде:
< / тело >
В этом коде:
- Установите положение « вход ” элементы в “ родственник ».
- « фокус: транслировать-x-4 ” перемещает кнопку на 4 пикселя вправо по оси X и одновременно на 4 пикселя вниз на “ фокус: перевести-y-4 », когда пользователь нажимает на поле ввода.
- « фокус: контур-2 » создает контур вокруг текстового поля при нажатии пользователем.
Шаг 2. Проверьте выходные данные
Просмотрите веб-страницу, созданную с помощью кода, чтобы заметить изменение:
Вывод выше показывает, что стиль был применен к выбранному элементу, когда он стал фокусным.
Использование активного варианта со свойством Position.
Активный вариант используется для стилизации элементов HTML, чтобы определить состояние, когда пользователь нажимает и удерживает кнопку или какой-либо другой элемент. Свойство позиции может сделать вывод более привлекательным для пользователей, создавая более динамичный опыт.
Шаг 1. Добавьте свойство Hover с позицией в HTML
Создайте файл HTML и примените активный вариант вместе со свойством позиции. Например, эти свойства применяются к кнопке в приведенном ниже примере кода:
< кнопка сорт '=' 'относительный w-48 h-12 bg-blue-500 активен:translate-y-2 активен:bg-green-400' >
< охватывать сорт '=' 'текст-белый' >Нажмите на меня< / охватывать >
< / кнопка >
< / тело >
В приведенном выше коде:
- Установите положение « кнопка ” элемент в “ родственник ».
- « bg-синий-500 » устанавливает синий цвет фона кнопки.
- « активный: транслировать-y-2 ” перемещает кнопку на 2 пикселя вниз и меняет цвет кнопки на зеленый на “ активный: bg-green-400 ».
Шаг 2. Проверьте выходные данные
Просмотрите веб-страницу, созданную с помощью приведенного выше кода, и нажмите и удерживайте кнопку, чтобы увидеть изменения:
На рисунке выше показано, как стиль выбранного элемента кнопки меняется, когда он становится активным.
Это все, что нужно для применения наведения, фокуса и других состояний со свойством позиции в Tailwind.
Заключение
Наведение, фокус и другие состояния можно использовать со свойством позиции, используя предопределенные классы наведения, фокуса и других состояний, а затем применяя атрибуты класса позиции, такие как « абсолютный ', ' родственник и так далее по связке. В этом блоге показано, как использовать наведение, фокус и другие состояния с утилитой позиционирования в Tailwind.