Змусьте елементи реагувати на наведення.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

Змусьте елемент змінюватися, коли відвідувач наводить на нього курсор: блок, що піднімається, кнопка, що темнішає, зображення, що яскравішає. Ви встановлюєте спокійний вигляд на панелі Style, а вигляд під час наведення на її двійнику, панелі Hover style. У прикладі будується сіре текстове поле, що піднімається під час наведення.

Відео надає текстовому полю фон, відступи й тінь, що глибшає під час наведення.

Побудова текстового поля

  1. Натисніть + в області вмісту й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Row.
  3. Натисніть піктограму сітки на рядку, виберіть плитку з трьома рівними колонками й натисніть Save.
  4. Натисніть + у першій колонці й виберіть Text на вкладці Content.
  5. Введіть «Open day», установіть для нього Heading 3 і додайте один рядок під ним.

Установлення спокійного стилю

  1. У тому самому діалоговому вікні налаштувань відкрийте панель Style.
  2. Виберіть світло-сірий Background.
  3. У блоковій моделі встановіть верхній, лівий і нижній боки Padding у значення 24.
  4. Установіть Border radius у значення 8.
  5. Установіть Drop shadow у значення 1.

Установлення стилю наведення

  1. Відкрийте панель Hover style.
  2. Установіть Drop shadow у значення 4.
  3. Натисніть Save.
  4. Натисніть Save на панелі інструментів DXPR Builder.
  5. Відкрийте меню перегляду, піктограму ока на панелі інструментів, і виберіть Preview.
  6. Пересуньте вказівник на текстове поле.

Що ви бачите

У спокої текстове поле сіре із заокругленими кутами й легкою тінню. Коли вказівник його досягає, тінь глибшає і поле ніби піднімається; коли вказівник іде, воно осідає назад. Зміна тіні анімована. Інші зміни під час наведення, наприклад новий колір, перемикаються одразу.

Налаштування

Панель Hover style містить ті самі поля, що й панель Style. Порожнє поле зберігає спокійне значення.

Поле Застосування під час наведення
Margin, Border, Padding (блокова модель) Зсуньте, обрамуйте або збільште елемент
Font color Виділення тексту
Border color Підкреслення рамки
Background Зміна заливки
Background image, Background style, Background position Заміна або пересування зображення
Border style Показ рамки
Font size Збільшення тексту
Border radius Заокруглення кутів
Opacity Проявлення або затемнення елемента
Drop shadow Додавання глибини, від 1 до 5

Типові шаблони

  • Підняття картки: Drop shadow 1 у Style, 4 у Hover style.
  • Проявлення зображення: Opacity 0,7 у Style, 1 у Hover style.
  • Зміна кольору кнопки: темніший Background у Hover style.
  • Виділення рамки: Border style Solid зі світлим Border color у Style, акцентний Border color у Hover style.

Якщо ви не бачите ефекту

  • Текстове поле не змінюється, коли ви наводите на нього курсор. Значення наведення дорівнює спокійному значенню, або ви помилково встановили його на панелі Style. Відкрийте More > Settings і підвищте Drop shadow на панелі Hover style.
  • Ефект важко оцінити під час редагування. У режимі редагування елемент також показує свою панель керування та контур, коли ви наводите на нього курсор. Виберіть Preview у меню перегляду й наведіть курсор знову.
  • Opacity, Font size або Border radius зі значенням 0 не діють. Значення 0 вважається невстановленим для цих трьох полів. Щоб згасити елемент майже повністю, використайте Opacity зі значенням 0,01.

Що далі?