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

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

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

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

Добавляемые состояния не отображаются по умолчанию — откройте States settings чтобы их добавить. Они управляются условиями: вы сами определяете, когда они активируются.

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

Раздел States в правой панели выбранного элемента

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

Вложенные элементы становятся состоятельными вместе с родительским. Любое изменение дочернего элемента применяется только в рамках активного состояния родителя.

Builder применяет подходящий стиль во время выполнения.

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

Selectable element with Selected state activated and a style override applied

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

Default: Исходный внешний вид элемента.
Selected: Применяется, когда пользователь нажимает на элемент. Builder возвращается к Default, когда пользователь снимает выбор.

В группе с единственным выбором выбор одного элемента снимает выделение с остальных. Группы с множественным выбором позволяют выбирать несколько элементов одновременно. Переключатели независимы — выбор одного не влияет на соседние. Подробнее о типах групп.

Tip

Чтобы повторно использовать стили для конкретных состояний, добавьте их к одному элементу, например к карточке продукта. Затем попросите AI Editor применить их к остальным элементам. Стили для конкретных состояний не переносятся между соседними элементами автоматически.

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

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

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

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

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

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

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

Добавьте состояние 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: Шаги, до которых пользователь ещё не дошёл.