Web
Чтобы протестировать ваш код и посмотреть HTML-превью карточек, используйте DivKit Web Playground. В DivKit Web Playground доступна библиотека с примерами различных элементов: вы можете отредактировать код любого примера и отобразить результат в браузере или экране мобильного устройства.
Чтобы создать HTML-превью карточки:
- В левой части страницы добавьте код прототипа карточки в формате JSON или TypeScript.
- Чтобы использовать готовые примеры, нажмите кнопку Samples и выберите элемент из библиотеки. Примеры можно редактировать и дорабатывать.
- В правой части страницы выберите разрешение и тип экрана, для которого отобразится прототип карточки. Если в коде есть ошибки, они отобразятся в разделе Errors под превью карточки.
- Чтобы открыть структуру карточки, в правом нижнем углу нажмите кнопку Structure.
Настройка тематизации
DivKit Web SDK поддерживает динамическое переключение тем через параметр themeVariableName. Это позволяет управлять внешним видом компонентов в реальном времени.
Примечание
Для использования тематизации необходимо указать имя переменной, которая будет управлять темами. Если параметр не передан, функционал тематизации отключен
Пример настройки тематизации в компонентах Web SDK:
// Использование themeVariableName в компонентах
const config = {
themeVariableName: 'theme', // Имя переменной для управления темами
// другие параметры конфигурации
};
Переменная темы позволяет динамически изменять визуальное оформление компонентов DivKit без перезагрузки страницы.
Посмотреть результат на вашем устройстве
Чтобы смотреть результат изменения JSON в приложении для Android или iOS, свяжите с ним редактор:
-
Установите приложение DivKit Playground для Android или iOS на ваше устройство.
-
Выберите demo.
-
В DivKit Web Playground нажмите кнопку Share.
-
В приложении для Android нажмите кнопку и отсканируйте QR-код, либо вставьте адрес из поля Link to json.
Узнать больше
Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.