Шаблоны

Описание

Шаблоны нужны, чтобы избавиться от дублирования кода и не описывать каждую карточку с нуля. При использовании шаблона можно указывать и переопределять все поля родительского элемента.

Если вы часто создаете карточки с одинаковым или похожим содержанием, то стоит сохранить их в виде шаблонов.

Шаблоны помогут вам:

  • тратить меньше времени на создание карточек;

  • сократить размер приходящего JSON;
  • уменьшить количество возможных ошибок и опечаток при создании карточек.

Без шаблона
{
  "states": {
    "state1": {
      "data": {
        "type": "container",
        "direction": "vertical",
        "paddings": {
          "left": 4,
          "top": 4,
          "right": 4,
          "bottom": 4
        },
        "items": [
          {
            "type": "image",
            "width": {
              "type": "fixed",
              "value": "40",
              "unit": "dp"
            },
            "height": {
              "type": "fixed",
              "value": "40",
              "unit": "dp"
            },
            "image_url": "https://image.storage.net/icon.png"
          },
          {
            "type": "text",
            "font_size": 16,
            "text": "Hello, World!"
          }
        ]
      }
    }
  }
}                      
Скопировано
С шаблоном
{
  "templates": {
    "image-with-text": {
      "type": "container",
      "direction": "vertical",
      "paddings": {
        "left": 4,
        "top": 4,
        "right": 4,
        "bottom": 4
      },
      "items": [
        {
          "type": "image",
          "width": {
            "type": "fixed",
            "value": "40",
            "unit": "dp"
          },
          "height": {
            "type": "fixed",
            "value": "40",
            "unit": "dp"
          },
          "$image_url": "icon_url"
        },
        {
          "type": "text",
          "font_size": 16,
          "$text": "title_text"
        }
      ]
    }
  },
  "states": {
    "state1": {
      "data": {
        "type": "image-with-text",
        "icon_url": "https://image.storage.net/icon.png",
        "title_text": "Hello, World!"
      }
    }
  }
}                     
Скопировано

Примеры

Шаблоны можно использовать в сложных элементах (например, в контейнере с дочерними элементами). Тогда, чтобы изменить поля дочерних элементов, их нужно переименовать в параметрах: $имя_поля_в_элементе: новое_имя_поля

Отредактируем тип элемента gallery_item с полем item_image_url.

Пример переименования
{
  "templates": {
    "gallery_item": "container",
    <...>
    "items": [
      {
        "type": "image",
        "$image_url": "item_image_url"
      }
    ]
  }
} 
Пример использования
{
  "type": "gallery",
  <...>
  "items": [
    { 
      "type": "gallery_item",
      "item_image_url": "https://<...>"
    }
  ]
}      

Особенности использования

Шаблоны можно наследовать друг от друга. Они подчиняются всем тем же правилам, что и при создании обычного шаблона.

Ограничения в шаблонах:

  • Нельзя использовать системные имена в названии шаблонов и переменных. Например, нельзя завести шаблон container или поле text.
  • Можно шаблонизировать только базовые визуальные элементы.
  • У шаблона обязательно должно быть поле type.

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

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

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

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