Переключатель

Элемент switch — это переключатель с двумя состояниями: включен и выключен. Состояние хранится в переменной типа boolean, поэтому его можно использовать в выражениях и менять с помощью действий. Внешний вид переключателя определяет платформа, а в верстке настраивается только цвет включенного состояния.

Свойства элемента switch

• is_on_variable — string, обязательный параметр. Имя переменной типа boolean, в которой хранится состояние переключателя. Выражения в этом параметре не поддерживаются.
• is_enabled — bool, значение по умолчанию: true. Определяет, может ли пользователь переключать элемент. Со значением false переключатель не реагирует на нажатия и выглядит неактивным.
• on_color — color. Цвет переключателя во включенном состоянии в формате #RGB, #ARGB, #RRGGBB или #AARRGGBB. Если параметр не задан, используется цвет по умолчанию, который зависит от платформы.

Параметры is_enabled и on_color поддерживают выражения. Остальные свойства — размеры, отступы, видимость и другие — у переключателя общие с другими элементами. Подробное описание свойств элемента switch приведено в справочнике элементов.

Связь с переменной

Объявите переменную типа boolean и укажите ее имя в параметре is_on_variable. Переключатель и переменная связаны в обе стороны:

• Когда пользователь нажимает на переключатель, в переменную записывается новое значение: true для включенного состояния и false для выключенного.
• Когда значение переменной меняется, например после действия set_variable, переключатель принимает соответствующее положение. Это происходит, даже если переключатель отключен параметром is_enabled.

У элемента switch нет действий по нажатию (actions). Чтобы реагировать на переключение, используйте триггеры на переменной из is_on_variable или подставляйте эту переменную в выражения в свойствах других элементов.

В примере два переключателя управляют переменными notifications_enabled и sound_enabled. Второй переключатель доступен, только пока включен первый, а триггер выключает звук, когда пользователь отключает уведомления.

{
  "card": {
    "log_id": "switch_sample",
    "variables": [
      {
        "name": "notifications_enabled",
        "type": "boolean",
        "value": true
      },
      {
        "name": "sound_enabled",
        "type": "boolean",
        "value": false
      }
    ],
    "variable_triggers": [
      {
        "condition": "@{!notifications_enabled}",
        "mode": "on_condition",
        "actions": [
          {
            "log_id": "turn_sound_off",
            "url": "div-action://set_variable?name=sound_enabled&value=false"
          }
        ]
      }
    ],
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "orientation": "vertical",
          "paddings": {
            "left": 16,
            "top": 12,
            "right": 16,
            "bottom": 12
          },
          "items": [
            {
              "type": "container",
              "orientation": "horizontal",
              "content_alignment_vertical": "center",
              "items": [
                {
                  "type": "text",
                  "text": "Notifications",
                  "font_size": 16
                },
                {
                  "type": "switch",
                  "id": "notifications_switch",
                  "is_on_variable": "notifications_enabled",
                  "on_color": "#0077FF",
                  "width": {
                    "type": "wrap_content"
                  },
                  "accessibility": {
                    "description": "Notifications"
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "horizontal",
              "content_alignment_vertical": "center",
              "margins": {
                "top": 12
              },
              "items": [
                {
                  "type": "text",
                  "text": "Sound",
                  "font_size": 16
                },
                {
                  "type": "switch",
                  "id": "sound_switch",
                  "is_on_variable": "sound_enabled",
                  "is_enabled": "@{notifications_enabled}",
                  "on_color": "#0077FF",
                  "width": {
                    "type": "wrap_content"
                  },
                  "accessibility": {
                    "description": "Sound"
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Размер и расположение

Переключатель не растягивается: он сохраняет размер, принятый на платформе. Параметры width и height задают размер области элемента, а сам переключатель располагается в ее центре.

Ширина элемента по умолчанию — match_parent. Чтобы поставить переключатель в одну строку с текстом, как в примере выше, задайте ему ширину wrap_content.

Особенности платформ

Цвет по умолчанию, который используется, если параметр on_color не задан:

• iOS — стандартный системный цвет;
• Android — цвет из атрибута темы colorControlActivated;
• Web — #129386.

Применение параметра on_color:

• iOS — в этот цвет окрашивается трек включенного переключателя;
• Android и Web — в этот цвет окрашивается бегунок, а трек получает тот же цвет с дополнительной прозрачностью.

Ограничения на платформе Web:

• Переключатель не отрисовывается, если он вложен в элемент, у которого заданы действия actions, или если для него либо для родительского элемента указан режим доступности exclude. В обработчик onError при этом передается ошибка.
• Если для переключателя не задано описание accessibility.description, в обработчик onError передается предупреждение. Описание используется как подпись переключателя для средств доступности.

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

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

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