Действия с элементами
Когда пользователь нажимает на карточку, action вызывает указанное в url
событие.
{
"actions": [{
"log_id": "<unique_id>",
"url": "div-action://<action_description>?other/parameters"
}]
}
Параметр |
Описание |
|
Событие, вызываемое по нажатию на карточку. |
|
Идентификатор для логирования. Должен быть уникален в рамках одной карточки. |
С помощью специального параметра menu_items
можно по нажатию открывать меню. Если хотя бы одно действие в массиве имеет поле menu_items
, то при нажатии на элемент будет показано меню, а все остальные поля будут проигнорированы.
Отдельный тип действий — действия, которые срабатывают только на долгое нажатие (longtap-actions
).
Наборы состояний
Элемент state переключает внешний вид контента. С его помощью можно добавлять:
- кнопки, которые меняют свое состояние (например, значок лайка при нажатии);
- раскрываемый контент (например, карточку мостов или геоблок).
На самом деле одна картинка меняется на другую, но пользователю кажется, что это интерактивное взаимодействие.
Чтобы переключиться на другое состояние, используйте url
:
div-action://set_state?state_id=<div_data_state_id/div_id/state_id>&temporary=<bool>
Путь формируется от корня иерархии:
Параметр |
Описание |
|
Путь состояния внутри Может быть иерархическим: |
|
Указывает на изменение состояния:
|
Посмотреть интерактивный пример
Пустое состояние
Если нужно скрыть какой-то блок, то можно не добавлять поле 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"
}
]
}
Параметр |
Описание |
|
Процент видимой площади элемента. |
|
Минимальное время его видимости. |
Дозагрузка данных
Для дозагрузки данных в виде patch и обновления текущего элемента укажите действие download
:
div-action://download?url=<patch_url>
Параметр |
Описание |
|
Ссылка для получения патча. |
Формат ответа:
{
"patch": {
// данные в формате patch
},
"templates": {
// шаблоны, которые могут быть использованы в секции patch
}
}
Примечание
Для того чтобы использовать патчи на Android вам необходимо передать реализацию DivDownloader
в используемую DivConfiguration
.
Переключение элементов
Для навигации внутри 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>
Параметр |
Описание |
|
Идентификатор элемента, в котором нужно переключить текущий. |
|
Номер элемента, до которого необходимо проскроллить. |
|
Указывает, как будет происходить навигация при достижении граничных элементов:
|
Переход в начало или конец gallery
Для перехода в начало или конец gallery укажите действие:
div-action://scroll_to_start?id=<div_id>
div-action://scroll_to_end?id=<div_id>
Параметр |
Описание |
|
Идентификатор элемента, в котором нужно переключить текущий. |
Если элементы внутри gallery
будут больше, чем размер галлереи, то действие scroll_to_end
прокрутит ее до конца последнего элемента.
Скролл gallery на несколько dp вперед или назад, а также до конкретного значения
Для скролла gallery вперед или назад укажите действие:
div-action://scroll_forward?id=<div_id>&step=<dp_count>&overflow=<clamp|ring>
div-action://scroll_backward?id=<div_id>&step=<dp_count>&overflow=<clamp|ring>
Для скролла gallery к конкретному значению dp укажите действие:
div-action://scroll_to_position?id=<div_id>&step=<dp_count>
Параметр |
Описание |
|
Идентификатор элемента, в котором нужно переключить текущий. |
|
Позиция в единицах dp, до которой нужно прокрутить или на сколько нужно прокрутить галерею, в зависимости от действия. |
|
Указывает, как будет происходить навигация при достижении граничных элементов:
|
Управление тултипами
Чтобы показать или скрыть тултипы, укажите действие show_tooltip
или hide_tooltip
:
div-action://show_tooltip?id=<tooltip_id>
div-action://hide_tooltip?id=<tooltip_id>
Параметр |
Описание |
|
Идентификатор тултипа. |
Управление видео
Для управления видео используйте действие video
:
div-action://video?id=video_id&action=<start|pause>
Параметр |
Описание |
|
Идентификатор элемента с видео. |
|
Действие с видео:
|
Управление таймерами
Для управления таймерами используйте действие timer
:
div-action://timer?action=<action>&id=<id>
Параметр |
Описание |
|
Идентификатор таймера. |
|
Действие с таймером:
|
Изменение значений переменных
Чтобы изменить значение переменных, укажите действие set_variable
:
div-action://set_variable?name=<variable_name>&value=<new_value>
Параметр |
Описание |
|
Имя переменной. |
|
Новое значение. |
Сохранение переменных во временное хранилищe
Чтобы временно сохранить значение переменных в хранилище, укажите действие set_stored_value
:
div-action://set_stored_value?name=<variable_name>&value=<new_value>&type=<variable_type>&lifetyme=<lifetime_in_sec>
Параметр |
Описание |
|
Имя переменной. |
|
Значение, которое будет сохранено. |
|
Тип переменной. Должен быть одним из |
|
Время жизни переменной в хранилище в секундах. При попытке достать переменную позже, она будет считаться устаревшей. |
Для того чтобы достать значение сохраненной переменной необходимо использовать вычисляемые выражения:
@{getStoredStringValue(name, default)}
@{getStoredNumberValue(name, default)}
@{getStoredIntegerValue(name, default)}
@{getStoredUrlValue(name, default)}
@{getStoredColorValue(name, default)}
Параметр name
всё также является именем сохраненной переменной, default
- значение по-умолчанию, которое вернется, если переменная не найдена или устарела.
Узнать больше
Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.
Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.