Действия с элементами

  1. Наборы состояний
    1. Пустое состояние
    2. Вложенные состояния
  2. Действия при появлении
  3. Дозагрузка данных
  4. Переключение элементов
  5. Управление тултипами
  6. Изменение значений переменных
    1. Узнать больше

Когда пользователь нажимает на карточку, action вызывает указанное в url событие.

{
  "actions": [{ 
    "log_id": "<unique_id>",
    "url": "div-action://<action_description>?other/parameters"
  }]
}
Скопировано
Параметр Описание
url Событие, вызываемое по нажатию на карточку.
log_id

Идентификатор для логирования. Должен быть уникален в рамках одной карточки.

Параметр Описание
url Событие, вызываемое по нажатию на карточку.
log_id

Идентификатор для логирования. Должен быть уникален в рамках одной карточки.

С помощью специального параметра menu_items можно по нажатию открывать меню. Если хотя бы одно действие в массиве имеет поле menu_items, то при нажатии на элемент будет показано меню, а все остальные поля будут проигнорированы.

Отдельный тип действий — действия, которые срабатывают только на долгое нажатие (longtap-actions).

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

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

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

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

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

div-action://set_state?state_id=<div_data_state_id/div_id/state_id>&temporary=<bool>
Скопировано

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

Параметр Описание
state_id

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

Может быть иерархическим: div_data_state_id/div_id_1/state_id_1/../div_id_n/state_id_n

Состоит из:
  • div_data_state_id — числовое значение state_id объекта state в data;
  • div_id — значение div_id объекта state;
  • state_id — значение state_id объекта state в state.
temporary

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

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

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

Может быть иерархическим: div_data_state_id/div_id_1/state_id_1/../div_id_n/state_id_n

Состоит из:
  • div_data_state_id — числовое значение state_id объекта state в data;
  • div_id — значение div_id объекта state;
  • state_id — значение state_id объекта state в state.
temporary

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

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

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

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

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

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

Если несколько состояний вложено друг в друга, то для переключения напишите полный путь от корня:
div-action://set_state?state_id=[id корневого состояния]/[div_id элемента]/[state_id состояния]
Скопировано
Посмотреть интерактивный пример

Действия при появлении

Элементы visibility срабатывают, когда элемент показывается на экране.

{
  "visibility_actions": [
    {
      "log_id":"content_01_visibility",
      "visibility_percentage": 100,
      "visibility_duration": 1000,
      "url": "div-action://none"
    }
  ]
}
Скопировано
Параметр Описание
visibility_percentage Процент видимой площади элемента.
visibility_duration Минимальное время его видимости.
Параметр Описание
visibility_percentage Процент видимой площади элемента.
visibility_duration Минимальное время его видимости.

Дозагрузка данных

Для дозагрузки данных в виде patch и обновления текущего элемента укажите действие download:

div-action://download?url=<patch_url>
Скопировано
Параметр Описание
url Ссылка для получения патча.
Параметр Описание
url Ссылка для получения патча.

Формат ответа:

{
  "patch": {
    // данные в формате patch
  },
  "templates": {
    // шаблоны, которые могут быть использованы в секции patch
  }
}
Скопировано

Переключение элементов

Для навигации внутри gallery, pager и tabs укажите действие:

  • set_current_item — для текущего элемента;
  • set_next_item — для следующего элемента;
  • set_previous_item — для предыдущего элемента.
div-action://set_current_item?id=<div_id>&item=<item_index>
div-action://set_next_item?id=<div_id>&overflow=<clamp|ring>
div-action://set_previous_item?id=<div_id>&overflow=<clamp|ring>
Скопировано
Параметр Описание
id Идентификатор элемента, в котором нужно переключить текущий.
item Минимальное время его видимости.
overflow

Указывает, как будет происходить навигация при достижении граничных элементов:

  • clamp — переход остановится на граничном элементе (значение по умолчанию);
  • ring — произойдет переход в начало или конец в зависимости от текущего элемента.
Параметр Описание
id Идентификатор элемента, в котором нужно переключить текущий.
item Минимальное время его видимости.
overflow

Указывает, как будет происходить навигация при достижении граничных элементов:

  • clamp — переход остановится на граничном элементе (значение по умолчанию);
  • ring — произойдет переход в начало или конец в зависимости от текущего элемента.

Управление тултипами

Чтобы показать или скрыть тултипы, укажите действие show_tooltip или hide_tooltip:

div-action://show_tooltip?id=<tooltip_id>
div-action://hide_tooltip?id=<tooltip_id>
Скопировано
Параметр Описание
id Идентификатор тултипа.
Параметр Описание
id Идентификатор тултипа.

Изменение значений переменных

Чтобы изменить значение переменных, укажите действие set_variable:

div-action://set_variable?name=<variable_name>&value=<new_value>
Скопировано
Параметр Описание
name Имя переменной.
value Новое значение.
Параметр Описание
name Имя переменной.
value Новое значение.

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

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news

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

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