Стили интерактивного состояния элементов

Компоненты из группы Управление вводом поддерживают специальные свойства стиля для своих интерактивных состояний.

Эти состояния возникают при основных взаимодействиях пользователя с UI:

Hover

Возникает при наведении курсора на компонент.

Пропадает, когда курсор исчезает или наступает следующее состояние.

Active

Возникает, когда на компонент нажимают курсором или клавишей Enter.

Пропадает, когда кнопка мыши или клавиша Enter отпущены.

Focus

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

Пропадает, если другой компонент переходит в состояние фокуса.

Каждое состояние имеет отдельное свойство стиля в группе свойств Стиль элемента компонентов. CSS-свойства , добавленные в эти поля, применяются, пока компонент находится в соответствующем состоянии.

Настройка стилей интерактивного состояния элементов

Давайте рассмотрим один из наиболее распространенных случаев - стилизация компонента Кнопка во всех его состояниях.

  1. В UI Builder добавьте компонент Кнопка на инструментальную панель, щелкнув по нему в Палитре компонентов или перетащив его на макет.

  2. Откройте Редактор свойств, наведя курсор на компонент на макете и нажав кнопку Настроить () в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В Редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента добавьте базовые стили в свойство Стиль CSS элемента:

height: auto;
margin: auto;
font-size: 40px;
letter-spacing: 0.8px;
font-weight: 400;
padding: 32px 64px;
border-radius: 40px;
background: radial-gradient(circle, royalblue 0%, fuchsia 100%);
box-shadow: 0 6px 32px 0 rgba(100,120,140,0.64);
transition: 0.24s ease-out;

  1. Добавьте стили состояния hover в свойство Стили при наведении:

transform: scale(0.95);
filter: brightness(1.2);
box-shadow: 0 4px 24px 0 rgba(100,120,140,0.8);

  1. Добавьте стили состояния active в свойство Активный стиль:

transform: scale(0.925);
filter: brightness(1);
box-shadow: 0 2px 16px 0 rgba(100,120,140,1);

  1. Добавьте стили состояния focus к свойству Стили при фокусе:

:not(:active) {
  outline: solid 6px indigo;
}

  1. Все стили применяются, как только каждое поле выходит из фокуса. Проверьте результаты на инструментальной панели.

Чтение дополнительной информации об используемом CSS-свойстве transitionв статье Анимированные переходы стилей.