Стили дополнительных состояний
Что такое дополнительные состояния элементов
У элементов и виджетов, с которыми может взаимодействовать пользователь — например, меню, поля формы, аккордеон, табы — есть дополнительные состояния. Примеры: активное состояние чекбокса или радио-кнопки в форме, раскрытая вкладка аккордеона или таба.
Дополнительные состояния можно стилизовать, изменив их стандартные цвета. Например, можно убрать голубую подсветку для раскрытого айтема аккордеона, заменив ее цвет на нужный. Это позволит сохранить единый стиль в дизайне вашего сайта.
Как стилизовать элементы в разных состояния
Чтобы настроить стили элемента в каком-либо дополнительном состоянии, нужно:
- Переключить элемент в желаемое состояние.
- Задать стили элементу в этом состоянии.
Как переключаться между состояниями элемента
Вы можете переключаться между дополнительными состояниями элемента двумя способами: на вкладке Настройки или на вкладке Дизайн— выбирайте, как вам удобнее. Ниже расскажем, как это сделать.
- Выберите элемент виджета, для которого нужно переключить состояние. Например, для аккордеона это будет 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 состояние на Ошибка.
Для каждого элемента формы нужно выбирать соответствующий ему элемент: если вы стилизуете текстовую область, выбирайте Textarea Group, чекбокс — Checkbox Group, радио — Radio Group, список выбора — Select Group.
- Выберите элемент Error Message, перейдите на вкладку Дизайн и настройте нужные стили для сообщения об ошибке.
Например, вы можете задать цвет и размер текста.
Стилизация сообщения об ошибке при отправке формы
- Выберите виджет Form, перейдите на вкладку Настройки и переключите UI состояние на Ошибка.
- Выберите элемент Error Text, перейдите на вкладку Дизайни настройте нужные стили для сообщения об ошибке.
Например, вы можете задать цвет и размер текста. Вы также можете изменить сам текст сообщения.
Вы также можете добавлять дополнительные элементы, которые будут отображаться при возникновении ошибки — например, поясняющий текст или картинку. Для этого добавьте дополнительные элементы в блок Error State.
Стилизация сообщения об успешной отправке формы
- Выберите виджет Form, перейдите на вкладку Настройки и переключите UI состояние на Успешно.
- Выберите элемент Success Text, перейдите на вкладку Дизайн и настройте нужные стили для сообщения об ошибке.
Например, вы можете задать цвет и размер текста. Вы также можете изменить сам текст сообщения.
Вы также можете добавлять дополнительные элементы, которые будут отображаться при успешной отправке формы — например, поясняющий текст или картинку. Для этого добавьте дополнительные элементы в блок Success State.