Состояния элементов

Интерактивные элементы флоу меняют внешний вид в зависимости от действий пользователя: выбранный вариант квиза становится Selected, сфокусированный ввод — Active. Некоторые состояния управляются условиями — например, кнопку можно отключить (disable). Настройте стиль каждого состояния отдельно, чтобы давать пользователям визуальную обратную связь без изменений в коде приложения.

Доступные состояния по типу элемента

Тип элемента	Встроенные состояния	Добавляемые состояния
Выбираемые элементы	Default, Selected	Disabled
Поля ввода	Default, Active, Invalid	Disabled
Любой элемент с tap-взаимодействием — кнопки, изображения, иконки, стеки и т. д.	Default	Disabled
Шаги индикатора прогресса	Completed, Current, Upcoming	—
Добавляемые состояния не отображаются по умолчанию — откройте States settings чтобы их добавить. Они управляются условиями: вы сами определяете, когда они активируются.

Как стилизовать состояние

Секция States в правой панели выбранного элемента

Выберите элемент. В секции States правой панели отображаются поддерживаемые состояния элемента.
В секции States активируйте нужное состояние. При необходимости добавьте состояние Disabled на основе условий.
Измените любое свойство — заливку, рамку, типографику, текст и т. д. Изменение применяется только к этому состоянию. Вложенные элементы становятся зависимыми от состояния родителя. Любое изменение дочернего элемента — цветов, расположения, текста — применяется только в активном состоянии родителя.
Во время выполнения Builder применяет соответствующий стиль.

Состояние может менять содержимое текстового элемента, а не только его внешний вид. Builder воспринимает текстовый контент как свойство — такое же, как заливка или ширина рамки.

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

Selectable element with Selected state activated and a style override applied

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

Default: Стандартный вид элемента в состоянии покоя.
Selected: Применяется, когда пользователь нажимает на элемент. Builder возвращается к Default, когда пользователь снимает выбор с элемента. В группе с одним выбором выбор одного элемента снимает выбор с остальных. Группы с несколькими вариантами позволяют выбрать несколько элементов одновременно. Переключатели независимы — выбор одного не влияет на соседние. См. типы групп.

Нужно одинаково стилизовать одно состояние для нескольких элементов (например, варианты квиза)? Сначала настройте стиль одного элемента, затем продублируйте его. Стилизация состояния не переносится между соседними элементами — дублирование является текущим обходным решением.

Состояния поля ввода

Default: Стандартный вид поля в покое.
Active: Применяется, пока поле в фокусе.
Invalid: Применяется, когда содержимое поля не проходит валидацию. Например, если в поле email нет символа @. См. Валидация полей ввода.
Disabled: Поле неактивно и недоступно для взаимодействия. Это состояние добавляется вручную; см. Состояние Disabled на основе условий.

Каждое состояние настраивается так же, как у выбираемого элемента: активируйте нужное состояние и измените свойства.

Состояние Disabled на основе условий

Состояние Disabled запрещает пользователю взаимодействовать с элементом. В отличие от Default, Selected, Active или Invalid, состояние Disabled не активируется само по себе — для него нужно задать условие-триггер вручную.

Disabled доступно для:

Inputs: Любое поле ввода — текст, email, пароль, число, телефон, дата и/или время.
Selectable elements: Варианты квиза, продукты, вкладки, переключатели пробного периода и любой пользовательский выбираемый элемент.
Любой элемент с действием по нажатию: Например, кнопка, изображение или иконка, которые запускают навигационное действие.

Добавьте состояние Disabled

Панель настройки состояний с видимой опцией Add Disabled state

Чтобы добавить и настроить состояние Disabled:

Выберите нужный элемент.
В разделе States нажмите Settings .
Выберите Add Disabled state. Состояние Disabled появится в разделе States.
Рядом с новым состоянием Disabled нажмите Edit conditional state .
Добавьте условие. Если нужно заблокировать кнопку submit до тех пор, пока введённые данные не пройдут валидацию, сравните переменную isValid элемента ввода со значением false.
Оформите состояние Disabled визуально, чтобы обозначить ограничение (например, уменьшите прозрачность).

SDK оценивает условие во время выполнения и автоматически применяет состояние Disabled — изменения в коде приложения не требуются.

Состояния шагов для индикаторов прогресса

Основная статья: Индикаторы прогресса

Индикаторы прогресса показывают пользователю, насколько далеко он продвинулся в флоу онбординга. Каждый шаг имеет три состояния:

Completed: Шаги, которые пользователь уже прошёл.
Current: Текущий шаг пользователя.
Upcoming: Шаги, до которых пользователь ещё не дошёл.