Условия состоянияlink

В дополнение к условиям адаптивности, SIMAI Framework поддерживает условия состояния, которые определяют стили в зависимости от состояния элементов. Это позволяет изменять внешний вид элементов в такие моменты, как наведение курсора, установка фокуса или активация, что делает интерфейс более интерактивным и отзывчивым.

Доступные условия состояния:

• hover — применяется, когда пользователь наводит курсор на элемент. Используется для изменения стиля элементов при взаимодействии с ними, например, подсветка кнопки или изменение цвета текста.
• focus — активируется, когда элемент получает фокус (например, при переходе по нему с клавиатуры или при клике на поле ввода). Это условие помогает визуально выделить элементы, находящиеся в активном состоянии, чтобы улучшить их доступность.
• active — применяется к элементу, когда он находится в активном состоянии (например, при нажатии на кнопку). Используется для создания визуальной обратной связи при взаимодействии с элементом.

Если условие состояния не указано, модификатор применяется ко всем состояниям элемента.

Примеры использования:

• hover:bg-primary — устанавливает фоновый цвет bg-primary при наведении курсора на элемент.
• focus:border-highlight — добавляет обводку border-highlight для элементов в фокусе.
• active:opacity-80 — снижает прозрачность элемента до 80% при его активации.

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