Стили дополнительных состояний

Что такое дополнительные состояния элементов

У элементов и виджетов, с которыми может взаимодействовать пользователь — например, меню, поля формы, аккордеон, табы — есть дополнительные состояния. Примеры: активное состояние чекбокса или радио-кнопки в форме, раскрытая вкладка аккордеона или таба.

Дополнительные состояния можно стилизовать, изменив их стандартные цвета. Например, можно убрать голубую подсветку для раскрытого айтема аккордеона, заменив ее цвет на нужный. Это позволит сохранить единый стиль в дизайне вашего сайта.


Стилизация раскрытого элемента аккордеона

Как стилизовать элементы в разных состояния

Чтобы настроить стили элемента в каком-либо дополнительном состоянии, нужно:

  1. Переключить элемент в желаемое состояние.
  2. Задать стили элементу в этом состоянии.

Как переключаться между состояниями элемента

Вы можете переключаться между дополнительными состояниями элемента двумя способами: на вкладке Настройки или на вкладке Дизайн— выбирайте, как вам удобнее. Ниже расскажем, как это сделать.

  1. Выберите элемент виджета, для которого нужно переключить состояние. Например, для аккордеона это будет Accordion Item, а для табов — Tab Item.

  1. Переключите состояние элемента одним из способов:


1 способ: на вкладке Настройки

Перейдите на вкладку Настройки и переключитесь на нужное UI состояние элемента — например, Закрыт и Открыт.

Переключение состояний элемента на вкладке Настройки


2 способ: на вкладке Дизайн в поле Источники стилей

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

Переключение состояний элемента на вкладке Дизайн


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


Это может быть удобно, например, чтобы раскрыть все элементы аккордеона для редактирования их контента.

Переключение состояний отдельных элементов в настройках виджета Accordion

Как стилизовать элемент в выбранном состоянии


После того как вы переключили элемент в нужное состояние, вы можете задать для него желаемые стили, на вкладкеДизайн.

Далее рассмотрим на примерах, как стилизовать дополнительные состояния для разных виджетов.

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

Аккордеон (Accordion)

Вы можете задать стили для состояния Открыт (Opened) — открытый элемент аккордеона.

По умолчанию у заголовка открытого элемента установлен голубой цвет фона. Вы можете изменить его, а также стилизовать текст заголовка.

  1. Выберите любой элемент аккордеона — Accordion Item, перейдите на вкладку Настройки и переключите UI состояние на Открыт. Теперь на холсте будет отображаться выбранный элемент аккордеона в открытом состоянии.

Выбираем UI состояние Открыт для Accordion Item

  1. Выберите заголовок элемента — Accordion Title, перейдите на вкладку Дизайн и настройте нужные стили для заголовка.


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

Выбираем стили для Accordion Title при открытом элементе аккордеона

Готово! Теперь при открытии элемента аккордеона у него будет меняться фон и цвет текста.


Табы (Tabs)


Вы можете задать стили для состоянияОткрыт (Opened)— когда вкладка активна. Например, можно изменить цвет фона и текста заголовка открытой вкладки или добавить границы.

  1. Выберите любой заголовок вкладки — Tab Item, перейдите на вкладку Настройки и переключите UI состояние на Открыт. Теперь на холсте будет отображаться выбранная вкладка в открытом состоянии.

Выбираем UI состояние Открыт для Tab Item

  1. Перейдите на вкладку Дизайн и настройте нужные стили для заголовка.

Например, задайте цвета фона и границ, а также цвет текста.

Выбираем стили для Tab Item при открытой вкладке

Готово! Теперь при открытии вкладки у ее заголовка будет меняться фон и цвет текста.


Меню (Menu)

Вы можете задать стили для следующих состояний пункта меню:

  • Открыт (Opened) — состояние пункта многоуровневого меню, показывает что его подменю развернуто.

Открытый пункт меню

  • Текущий (Current) — активный пункт, соответствующий странице сайта, на которой пользователь находится в данный момент. Например, когда пользователь кликает на пункт «О компании», и открывается соответствующая страница, то у данного пункта будет состояние Текущий.

  • Посещенный (Visited) — пункт меню, который уже открывался пользователем.

Стилизация открытого и текущего пунктов меню

Чтобы стилизовать нужное вам состояние:

  1. Выберите любой пункт меню — Menu Item, перейдите на вкладку Настройки и переключите UI состояние на Текущий или Открыт. Теперь на холсте будет отображаться данный пункт меню в выбранном состоянии.

Выбираем UI состояние Текущий или Открыт для Menu Item

  1. Далее вы можете стилизовать пункт меню — например, изменить стили текста, а также цвет фона или границы. Для этого перейдите на вкладку Дизайн.

  • Для стилизации текста: выберите текстовый элемент у пункта меню — Text и настройте нужные стили для названия пункта.

Стилизуем текст текущего пункта меню

  • Для стилизации фона или границ: выберите элемент Menu Linkи задайте фон или границы для пункта меню. Также можно поменять или удалить иконку в текущем пункте меню, выбрав соответствующий элемент.

Задаем стили для Menu Link текущего пункта меню

Готово! Теперь у активного пункта меню будет меняться цвет и не будет отображаться иконка.

Для текущего пункта меню изменили цвет текста и скрыли иконку

Стилизация посещенного пункта меню

Состояние Посещенный нужно стилизовать для элемента ссылки в пункте меню:

  1. Выберите элемент ссылки в пункте меню — Menu Link, перейдите на вкладку Настройки и переключите UI состояние на Посещенный. Теперь на холсте будет отображаться данный пункт меню в выбранном состоянии.

Выбираем UI состояние Посещенный для Menu Link

  1. Далее стилизуйте ссылку, перейдя на вкладку Дизайн. Например, измените цвет текста.

Задаем стили для посещенного пункта меню

Готово! Теперь у посещенного пункта меню будет меняться цвет.


Слайдер (Slider)

Вы можете задать стили для активного элемента пагинации (буллета), а также стили активной миниатюры.

Стилизация активного буллета

  1. Выберите любой буллет — элемент Dot (внутри слоев Pagination → Bullets), перейдите на вкладку Настройки и переключите UI состояние на Текущий. Теперь на холсте будет отображаться выбранный буллет в активном состоянии.

Выбираем UI состояние Текущий для Dot

  1. Перейдите на вкладку Дизайн и настройте нужные стили для буллета.

Например, задайте цвета фона и границы.

Задаем стили для активного буллета

Готово! Теперь активный буллет у слайдера будет нужного цвета.

Стилизация активной миниатюры

  1. Выберите любую миниатюру — элемент Thumb, перейдите на вкладку Настройки и переключите UI состояние на Текущий. Теперь на холсте будет отображаться выбранная миниатюра в активном состоянии.

Выбираем UI состояние Текущий для Thumb

  1. Перейдите на вкладку Дизайн и настройте нужные стили для миниатюры.

Например, задайте границы.

Задаем стили для активной миниатюры

Готово! Теперь у активной миниатюры слайдера появится рамка.


Ссылки (Text Link, Link Block)

Вы можете задать стили для состояния Посещенный для ссылки или линк-блока. Они будут определять внешний вид ссылки после того, как пользователь уже кликнул по ней.

  1. Выберите ссылку — элемент Text Link или Link Block, перейдите на вкладку Настройки и переключите UI состояние на Посещенный.

Выбираем UI состояние Посещенный для Text Link

  1. Перейдите на вкладку Дизайн и настройте нужные стили для ссылки.

Например, вы можете задать цвет текста.

Задаем стили для посещенной ссылки

Готово! Теперь если пользователь хотя бы один раз перейдет по ссылке, она поменяет цвет.


Формы (Form)


Для форм вы можете настроить стили для следующих состояний элементов:

  • Выбран (Checked) — для элементов Checkbox и Radio
  • Фоновый текст (Placeholder) — для элементов Input, Textarea, Search
  • Ошибка (Error) — для элементов Input, Textarea, Checkbox, Radio, Select
  • Ошибка (Error) и Успешно (Success) — для виджетов Form и Payment

Стилизация выбранного элемента у Radio

  1. Выберите любой элемент Radio — Radio Item, перейдите на вкладку Настройки и переключите UI состояние на Выбран.

Выбираем UI состояние Выбран для Radio Item

  1. Выберите элемент Radio Styled, перейдите на вкладку Дизайн и настройте нужные стили для радио-кнопки.

Вы можете задать цвет границы радио-кнопки и цвет градиента для точки внутри нее. Контекстный селектор желтого цвета — Radio Item:Checked подсказывает, что вы стилизуете кнопку для состояния Выбран у элемента Radio Item.

Задаем стили для радио-кнопки

Стилизация выбранного элемента у Checkbox

  1. Выберите элемент Checkbox — Checkbox Item, перейдите на вкладку Настройки и переключите UI состояние на Выбран.

Выбираем UI состояние Выбран для Checkbox Item

  1. Выберите элемент Checkbox Styled, перейдите на вкладку Дизайн и настройте нужные стили для кнопки чекбокса.

Вы можете задать цвет фона и границ кнопки. Контекстный селектор желтого цвета — Checkbox Item:Checked подсказывает, что вы стилизуете кнопку для состояния Выбран у элемента Checkbox Item.

Задаем стили для кнопки чекбокса

Стилизация фонового текста в полях для ввода

  1. Выберите элемент поля — Input (для инпута) или Textarea (для текстового поля), перейдите на вкладку Настройки и переключите UI состояние на Фоновый текст.

Выбираем UI состояние Фоновый текст для Input

  1. Перейдите на вкладку Дизайни настройте нужные стили для фонового текста.

Например, вы можете задать цвет и размер текста.

Задаем стили для фонового текста


Стилизация сообщения об ошибке при заполнении полей формы

  1. Выберите элемент Input Group (для инпута), перейдите на вкладку Настройки и переключите UI состояние на Ошибка.

Для каждого элемента формы нужно выбирать соответствующий ему элемент: если вы стилизуете текстовую область, выбирайте Textarea Group, чекбокс — Checkbox Group, радио — Radio Group, список выбора — Select Group.

Выбираем UI состояние Ошибка для Input Group

  1. Выберите элемент Error Message, перейдите на вкладку Дизайн и настройте нужные стили для сообщения об ошибке.

Например, вы можете задать цвет и размер текста.

Задаем стили для сообщения об ошибке

Стилизация сообщения об ошибке при отправке формы

  1. Выберите виджет Form, перейдите на вкладку Настройки и переключите UI состояние на Ошибка.

Выбираем UI состояние Ошибка для Form

  1. Выберите элемент Error Text, перейдите на вкладку Дизайни настройте нужные стили для сообщения об ошибке.

Элемент Error Text в слоях

Например, вы можете задать цвет и размер текста. Вы также можете изменить сам текст сообщения.

Задаем стили для сообщения об ошибке

Вы также можете добавлять дополнительные элементы, которые будут отображаться при возникновении ошибки — например, поясняющий текст или картинку. Для этого добавьте дополнительные элементы в блок Error State.

В слоях: элемент Text в блоке Error State

Дополнительный текст для пояснения ошибки

Стилизация сообщения об успешной отправке формы

  1. Выберите виджет Form, перейдите на вкладку Настройки и переключите UI состояние на Успешно.

Выбираем UI состояние Успешно для Form

  1. Выберите элемент Success Text, перейдите на вкладку Дизайн и настройте нужные стили для сообщения об ошибке.

Например, вы можете задать цвет и размер текста. Вы также можете изменить сам текст сообщения.

Задаем стили для сообщения об успешной отправке формы

Вы также можете добавлять дополнительные элементы, которые будут отображаться при успешной отправке формы — например, поясняющий текст или картинку. Для этого добавьте дополнительные элементы в блок Success State.

В слоях: элемент Text в блоке Success State

Дополнительный поясняющий текст