Компоненты Remote UI

Используйте компоненты Remote UI, когда стандартная конфигурация не обеспечивает нужное поведение. Добавьте компонент с типом "type": "custom" и его значением custom_type. На этой странице описаны компоненты PNLight, которые можно добавить в конфигурацию Remote UI. Компонентам с пометкой схемы v3 требуется "schemaVersion": 3 в документе Remote UI. Компоненты, помеченные как schema v3, требуют "schemaVersion": 3 в корне документа Remote UI.

Круговой индикатор загрузки

pnlight.circular_loader показывает круговой индикатор загрузки на экране Remote UI. Используйте его, пока приложение или экран загружает содержимое.

{
  "type": "custom",
  "custom_type": "pnlight.circular_loader",
  "width": { "type": "fixed", "value": 48 },
  "height": { "type": "fixed", "value": 48 },
  "custom_props": {
    "style": "large",
    "color": "#FF007AFF",
    "accessibility_label": "Loading"
  }
}

Свойство	Назначение
`style`	Укажите `medium` или `large`. Значение по умолчанию — `medium`.
`color`	Укажите цвет в формате `#RRGGBB` или `#AARRGGBB`. По умолчанию используется системный цвет метки.
`accessibility_label`	Укажите метку, которую озвучивают вспомогательные технологии. Значение по умолчанию — `Loading`.

Задайте размер компонента с помощью полей width и height. Используйте { "type": "wrap_content" } для любого измерения, если индикатор должен использовать собственный размер.

Индикатор прогресса

pnlight.progress_bar показывает анимированный линейный индикатор прогресса. Используйте его для прогресса сканирования, завершения онбординга, шагов загрузки или любого состояния Remote UI, где заполненная полоса должна плавно двигаться между значениями.

{
  "type": "custom",
  "custom_type": "pnlight.progress_bar",
  "width": { "type": "match_parent" },
  "height": { "type": "fixed", "value": 10 },
  "custom_props": {
    "instance_id": "scan_progress_bar",
    "progress": 0,
    "progress_variable": "scan_progress",
    "animation_duration": 0.45,
    "track_color": "#FFE5E5EA",
    "fill_color": "#FF007AFF"
  }
}

Свойство	Назначение
`instance_id`	Укажите стабильный ID этой полосы. Используйте уникальное значение для каждой полосы, отображаемой одновременно.
`progress`	Укажите целевое заполнение от `0` до `1`. Значения вне диапазона будут ограничены.
`progress_variable`	Укажите имя переменной DivKit, которая реактивно обновляет `progress`.
`initial_progress`	Укажите начальное заполнение, если полоса должна анимироваться при появлении.
`indeterminate`	Укажите `true` для зацикленной движущейся полосы, когда прогресс неизвестен.
`track_color`	Укажите цвет трека в формате `#RRGGBB` или `#AARRGGBB`.
`track_height`	Укажите собственную толщину, которая используется, когда `height` равен `wrap_content`.
`fill_color`	Укажите цвет заполнения или начальный цвет градиента.
`fill_color_end`	Укажите второй цвет заполнения, чтобы отобразить горизонтальный градиент.
`corner_radius`	Укажите радиус скругления трека и заполнения. По умолчанию используется форма капсулы.
`fill_inset`	Добавьте отступ между границами трека и заполнением.
`animation_duration`	Укажите длительность перехода к новому значению в секундах.
`indeterminate_duration`	Укажите длительность одного прохода движущейся полосы в секундах.
`indeterminate_band_width`	Укажите ширину движущейся полосы как долю ширины трека.
`reduced_motion`	Укажите `true`, чтобы применять значения сразу, без анимации.
`accessibility_label`	Укажите метку, которую озвучивают вспомогательные технологии. Значение озвучивается как процент.

Это компонент schema v3. Документ Remote UI должен объявлять "schemaVersion": 3.

Анимированное число

pnlight.animated_number показывает число, которое анимированно меняется между значениями. Используйте его для счётчиков, сумм экономии, сводки прогресса или метрик, которые должны плавно обновляться.

{
  "type": "custom",
  "custom_type": "pnlight.animated_number",
  "width": { "type": "match_parent" },
  "height": { "type": "wrap_content" },
  "custom_props": {
    "instance_id": "issues_count",
    "value": 0,
    "value_variable": "issues_found",
    "suffix": " issues found",
    "font_size": 28,
    "font_weight": "bold"
  }
}

Свойство	Назначение
`instance_id`	Укажите стабильный ID этого числа. Используйте уникальное значение для каждого числа, отображаемого одновременно.
`value`	Укажите целевое число.
`value_variable`	Укажите имя переменной DivKit, которая реактивно обновляет `value`.
`initial_value`	Укажите начальное значение, если число должно анимироваться при появлении.
`decimals`	Укажите количество дробных знаков. Одно значение используется как минимум и максимум дробных знаков.
`min_integer_digits`	Дополняет короткие числа нулями слева.
`grouping`	Включает или отключает разделители тысяч. По умолчанию включено.
`monospaced_digits`	Использует табличные цифры, чтобы метка не прыгала во время счёта.
`prefix`	Добавляет текст перед отформатированным числом.
`suffix`	Добавляет текст после отформатированного числа.
`font_size`	Указывает размер текста в пунктах.
`font_weight`	Укажите `ultralight`, `thin`, `light`, `regular`, `medium`, `semibold`, `bold`, `heavy` или `black`.
`text_color`	Укажите цвет текста в формате `#RRGGBB` или `#AARRGGBB` либо используйте адаптивный цвет по умолчанию.
`text_alignment`	Укажите `left`, `center`, `right` или `natural`.
`animation_duration`	Укажите длительность счёта до нового значения в секундах.
`curve`	Укажите `linear`, `ease_in`, `ease_out` или `ease_in_out`.
`reduced_motion`	Укажите `true`, чтобы применять значения сразу, без счёта.
`accessibility_label`	Укажите метку, которую озвучивают вспомогательные технологии. Целевое значение озвучивается как значение элемента.

Это компонент schema v3. Документ Remote UI должен объявлять "schemaVersion": 3.

Просмотрите конфигурацию в разделе Remote UI, затем протестируйте плейсмент в приложении, прежде чем включать его для пользователей.

Индикатор прогресса (схема v3)

pnlight.progress_bar показывает анимированный индикатор прогресса. Используйте его в документах схемы v3, когда экран должен показывать завершение, сканирование, загрузку или другое дробное состояние.

{
  "type": "custom",
  "custom_type": "pnlight.progress_bar",
  "width": { "type": "match_parent" },
  "height": { "type": "fixed", "value": 10 },
  "custom_props": {
    "instance_id": "scan_progress",
    "progress": 0.72,
    "initial_progress": 0,
    "fill_color": "#FF087EF5",
    "fill_color_end": "#FF34C759",
    "animation_duration": 1.4
  }
}

Свойство	Назначение
`instance_id`	Сохраняет отображаемый прогресс, если Remote UI перерисуется.
`progress`	Задает целевое значение от `0` до `1`.
`progress_variable`	Подписывает компонент на переменную DivKit для обновления прогресса.
`initial_progress`	Задает первое отображаемое значение до анимации к `progress`.
`indeterminate`	Показывает движущуюся полосу вместо фиксированного значения.
`track_color`	Задает цвет дорожки.
`track_height`	Задает минимальную высоту дорожки, когда высота DivKit равна `wrap_content`.
`fill_color`	Задает цвет заполнения.
`fill_color_end`	Добавляет второй цвет для горизонтального градиента.
`corner_radius`	Задает радиус скругления дорожки и заполнения.
`fill_inset`	Добавляет отступ между дорожкой и заполнением.
`animation_duration`	Задает длительность анимации прогресса в секундах.
`indeterminate_duration`	Задает длительность неопределенной анимации в секундах.
`indeterminate_band_width`	Задает ширину движущейся полосы как долю дорожки.
`reduced_motion`	Отключает анимацию при значении `true`.
`accessibility_label`	Задает accessibility-метку. По умолчанию — `Progress`.

Для прогресса на основе переменной оставьте progress буквальным начальным значением, а имя переменной DivKit укажите в progress_variable.

Анимированное число (схема v3)

pnlight.animated_number показывает число, которое считает от текущего значения к новой цели. Используйте его в документах схемы v3 для счетчиков, результатов сканирования, оценок и других числовых сводок.

{
  "type": "custom",
  "custom_type": "pnlight.animated_number",
  "width": { "type": "match_parent" },
  "height": { "type": "wrap_content" },
  "custom_props": {
    "instance_id": "items_scanned",
    "value": 1284,
    "initial_value": 0,
    "suffix": " items scanned",
    "font_size": 28,
    "font_weight": "bold",
    "text_alignment": "left",
    "animation_duration": 1.4
  }
}

Свойство	Назначение
`instance_id`	Сохраняет отображаемое число, если Remote UI перерисуется.
`value`	Задает целевое число.
`value_variable`	Подписывает компонент на переменную DivKit для обновления значения.
`initial_value`	Задает первое отображаемое значение до анимации к `value`.
`font_size`	Задает размер текста.
`font_weight`	Задает насыщенность текста.
`text_color`	Задает цвет текста.
`text_alignment`	Задает выравнивание `left`, `center`, `right` или `natural`.
`decimals`	Задает количество знаков после запятой.
`min_integer_digits`	Дополняет целую часть ведущими нулями.
`grouping`	Включает или отключает группировку цифр с учетом локали.
`monospaced_digits`	Использует табличные цифры, чтобы число не дергалось при анимации.
`prefix`	Добавляет текст перед числом.
`suffix`	Добавляет текст после числа.
`animation_duration`	Задает длительность анимации счета в секундах.
`curve`	Задает `linear`, `ease_in`, `ease_out` или `ease_in_out`.
`reduced_motion`	Отключает анимацию при значении `true`.
`accessibility_label`	Задает accessibility-метку.

Для счета на основе переменной оставьте value буквальным начальным значением, а имя переменной DivKit укажите в value_variable.

Начало работы

Интеграция SDK

Панель управления

Устранение неполадок

Журнал изменений

Компоненты Remote UI

Круговой индикатор загрузки

Индикатор прогресса

Анимированное число

Индикатор прогресса (схема v3)

Анимированное число (схема v3)

​Круговой индикатор загрузки

​Индикатор прогресса

​Анимированное число

​Индикатор прогресса (схема v3)

​Анимированное число (схема v3)

Круговой индикатор загрузки

Индикатор прогресса

Анимированное число

Индикатор прогресса (схема v3)

Анимированное число (схема v3)