--- metadata: - name: generator content: Diplodoc Platform v5.70.0 alternate: - https://divkit.tech/docs/en/concepts/states.md - https://divkit.tech/docs/ru/concepts/states.md - href: https://divkit.tech/docs/ru/concepts/states.md type: text/markdown title: Markdown version - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947 rel: describedby --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947 # Наборы состояний Элемент [state](https://divkit.tech/docs/ru/concepts/divs/2/div-state.md) переключает внешний вид контента. С его помощью можно добавлять: - кнопки, которые меняют свое состояние (например, значок лайка при нажатии); - раскрываемый контент (например, карточку мостов или геоблок). На самом деле одна картинка меняется на другую, но пользователю кажется, что это интерактивное взаимодействие. ## Начальное и текущее состояние {#current-state} Сразу после отрисовки активно состояние из свойства `default_state_id`. Если свойство не задано, активно первое состояние из `states`. Идентификатор активного состояния можно хранить в переменной: укажите ее имя в свойстве `state_id_variable`. Когда значение переменной меняется, меняется и активное состояние. Переменная имеет приоритет над `default_state_id`. ## Переключение состояния {#set-state} Чтобы переключиться на другое состояние, используйте `url`: ```translate=no div-action://set_state?state_id=&temporary= ``` Путь формируется от корня иерархии: #| || **Параметр** | **Описание** || || `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](https://divkit.tech/docs/ru/concepts/divs/2/div-data.md); - `id` — значение `id` объекта `state`. Если у элемента задано устаревшее свойство `div_id`, в пути используется его значение; - `state_id` — значение `state_id` объекта ``state`` в [state](https://divkit.tech/docs/ru/concepts/divs/2/div-state.md). || || `temporary` | Указывает на изменение состояния: - `true` — изменение временное и при пересоздании элемента состояние изменится на исходное (значение по умолчанию); - `false` — изменение состояния является постоянным. || |# То же действие в типизированном виде: ```json { "log_id": "show_clicked", "typed": { "type": "set_state", "state_id": "0/interactive_state/clicked", "temporary": false } } ``` Параметр `temporary` в типизированном действии поддерживается на Android и iOS. {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Действия на элементах div-state {#state-actions} Сам элемент `div-state` поддерживает все стандартные свойства действий, позволяя добавлять интерактивное поведение непосредственно к контейнеру состояний: - `actions` — действия, срабатывающие при нажатии на элемент состояния - `longtap_actions` — действия, срабатывающие при долгом нажатии на элемент состояния - `doubletap_actions` — действия, срабатывающие при двойном нажатии на элемент состояния - `press_start_actions` / `press_end_actions` — действия, срабатывающие в начале/конце нажатия - `hover_start_actions` / `hover_end_actions` — действия, срабатывающие при наведении на элемент {% note info %} Свойства `press_start_actions` и `press_end_actions` особенно полезны для компонентов с непрерывным взаимодействием, таких как слайдеры, где важно отслеживать начало и конец жеста перетаскивания. {% endnote %} {% cut "Пример: div-state с действиями" %} ```json { "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" } ] } ``` {% endcut %} Это позволяет создавать более сложное интерактивное поведение, когда сам контейнер состояний реагирует на взаимодействия пользователя, в дополнение к отдельным элементам внутри каждого состояния. ## Пустое состояние {#empty} Если нужно скрыть какой-то блок, то можно не добавлять поле `div`, а указать `"state_id": "empty"`. ![](../_images/create-card/empty-state-anim.gif =360x) {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Вложенные состояния {#nested} Если несколько состояний вложено друг в друга, то для переключения напишите полный путь от корня: ```translate=no div-action://set_state?state_id=[id корневого состояния]/[id элемента]/[state_id состояния] ``` {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)