Наборы состояний

Элемент state переключает внешний вид контента. С его помощью можно добавлять:

  • кнопки, которые меняют свое состояние (например, значок лайка при нажатии);
  • раскрываемый контент (например, карточку мостов или геоблок).

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

Начальное и текущее состояние

Сразу после отрисовки активно состояние из свойства default_state_id. Если свойство не задано, активно первое состояние из states.

Идентификатор активного состояния можно хранить в переменной: укажите ее имя в свойстве state_id_variable. Когда значение переменной меняется, меняется и активное состояние. Переменная имеет приоритет над default_state_id.

Переключение состояния

Чтобы переключиться на другое состояние, используйте url:

div-action://set_state?state_id=<div_data_state_id/id/state_id>&temporary=<bool>

Путь формируется от корня иерархии:

Параметр

Описание

state_id

Путь состояния внутри state, которое нужно активировать. Задается в формате div_data_state_id/id/state_id.

Может быть иерархическим: div_data_state_id/id_1/state_id_1/../id_n/state_id_n
Состоит из:

  • div_data_state_id — числовое значение state_id объекта state в data;
  • id — значение id объекта state. Если у элемента задано устаревшее свойство div_id, в пути используется его значение;
  • state_id — значение state_id объекта state в state.

temporary

Указывает на изменение состояния:

  • true — изменение временное и при пересоздании элемента состояние изменится на исходное (значение по умолчанию);
  • false — изменение состояния является постоянным.

То же действие в типизированном виде:

{
  "log_id": "show_clicked",
  "typed": {
    "type": "set_state",
    "state_id": "0/interactive_state/clicked",
    "temporary": false
  }
}

Параметр temporary в типизированном действии поддерживается на Android и iOS.

Посмотреть интерактивный пример

Действия на элементах div-state

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

  • actions — действия, срабатывающие при нажатии на элемент состояния
  • longtap_actions — действия, срабатывающие при долгом нажатии на элемент состояния
  • doubletap_actions — действия, срабатывающие при двойном нажатии на элемент состояния
  • press_start_actions / press_end_actions — действия, срабатывающие в начале/конце нажатия
  • hover_start_actions / hover_end_actions — действия, срабатывающие при наведении на элемент

Примечание

Свойства press_start_actions и press_end_actions особенно полезны для компонентов с непрерывным взаимодействием, таких как слайдеры, где важно отслеживать начало и конец жеста перетаскивания.

Пример: div-state с действиями
{
  "type": "state",
  "id": "interactive_state",
  "states": [
    {
      "state_id": "default",
      "div": {
        "type": "text",
        "text": "Нажмите, чтобы изменить состояние"
      }
    },
    {
      "state_id": "clicked",
      "div": {
        "type": "text",
        "text": "Состояние изменено!"
      }
    }
  ],
  "actions": [
    {
      "log_id": "state_click",
      "url": "div-action://set_state?state_id=0/interactive_state/clicked"
    }
  ],
  "longtap_actions": [
    {
      "log_id": "state_long_press",
      "url": "div-action://set_variable?name=long_pressed&value=true"
    }
  ]
}

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

Пустое состояние

Если нужно скрыть какой-то блок, то можно не добавлять поле div, а указать "state_id": "empty".

Посмотреть интерактивный пример

Вложенные состояния

Если несколько состояний вложено друг в друга, то для переключения напишите полный путь от корня:

div-action://set_state?state_id=[id корневого состояния]/[id элемента]/[state_id состояния]
Посмотреть интерактивный пример

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Предыдущая
Действия с элементами
Следующая
Действия видимости