Как использовать Hover, Focus и другие состояния со свойством Position в Tailwind?

В этой статье показано использование наведения, фокуса и других состояний со свойствами положения в Tailwind.

Как использовать Hover, Focus и другие состояния со свойством Position в Tailwind?

Наведение, фокус и другие состояния в Tailwind используются для стилизации элементов Tailwind, обеспечивая привлекательный и удобный интерфейс и привлекательный опыт для пользователей. Иногда свойство позиции необходимо применять для поддержания опыта на самом высоком уровне.

Метод 1: использование варианта наведения со свойством позиции

Вариант при наведении используется для стилизации выбранных элементов, когда пользователь наводит курсор на этот выбранный элемент. « позиция Атрибут ” можно использовать вместе с атрибутом “ зависать », чтобы установить положение до и после наведения. Эта пара используется для создания привлекательного опыта для пользователя.

Шаг 1. Добавьте свойство Hover с позицией в HTML
В приведенном ниже коде свойство hover применяется к свойству позиции на « кнопка элемент:

В этом коде:

• « родственник Класс » устанавливает кнопку относительно родительской страницы.
• « 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 и примените активный вариант вместе со свойством позиции. Например, эти свойства применяются к кнопке в приведенном ниже примере кода:

В приведенном выше коде:

• Установите положение « кнопка ” элемент в “ родственник ».
• « bg-синий-500 » устанавливает синий цвет фона кнопки.
• « активный: транслировать-y-2 ” перемещает кнопку на 2 пикселя вниз и меняет цвет кнопки на зеленый на “ активный: bg-green-400 ».

Шаг 2. Проверьте выходные данные
Просмотрите веб-страницу, созданную с помощью приведенного выше кода, и нажмите и удерживайте кнопку, чтобы увидеть изменения:

На рисунке выше показано, как стиль выбранного элемента кнопки меняется, когда он становится активным.

Это все, что нужно для применения наведения, фокуса и других состояний со свойством позиции в Tailwind.

Заключение

Наведение, фокус и другие состояния можно использовать со свойством позиции, используя предопределенные классы наведения, фокуса и других состояний, а затем применяя атрибуты класса позиции, такие как « абсолютный ', ' родственник и так далее по связке. В этом блоге показано, как использовать наведение, фокус и другие состояния с утилитой позиционирования в Tailwind.