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

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

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

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

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

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

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

Задать стили элементу в этом состоянии.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Табы (Tabs)

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

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

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

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

Меню (Menu)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Слайдер (Slider)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Формы (Form)

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

Выбран (Checked) — для элементов Checkbox и Radio

Фоновый текст (Placeholder) — для элементов Input, Textarea, Search

Ошибка (Error) — для элементов Input, Textarea, Checkbox, Radio, Select

Ошибка (Error) и Успешно (Success) — для виджетов Form и Payment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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