Фрейм

Фрейм задаёт границы версии макета и содержит виджеты. Обычно верхнеуровневые фреймы называются Desktop и Mobile, а вложенные используются для отдельных блоков.

Роль

В секции Frame выберите:

• Frame — обычный контейнер внутри макета;
• Breakpoint — адаптивная версия материала, которая выбирается по ширине страницы.

У Breakpoint появляются Fixed / Scalable и Gap below. Диапазоны всех версий настраиваются отдельно в Breakpoints.

Генерация Mobile

Если Desktop уже собран, выберите пустой Mobile-фрейм с ролью Breakpoint и нажмите Generate рядом с его названием. Редактор скопирует содержимое исходного фрейма и соберёт верхнеуровневые блоки в колонку.

Исходный фрейм, ширина колонки и расстояние между блоками настраиваются перед применением. Полный сценарий и ограничения описаны на странице Брейкпоинты.

Сетка

Сетка фрейма помогает выравнивать вложенные виджеты. Чтобы увидеть её на холсте, включите Show Frame Grid. Секция Frame Grid появляется в свойствах фрейма, пока сетка показана.

Anchors

Якорь — именованная вертикальная точка внутри breakpoint-фрейма. Добавьте якоря в секции Anchors и выберите режим:

• Same использует общие duration, offset и easing;
• Custom позволяет настроить прокрутку для каждого якоря отдельно.

Имена якорей должны быть понятными и различаться внутри фрейма.

Сначала нужно показать создание двух точек и раздельную настройку Custom, а затем проверить фактическую прокрутку.

Проверка в Preview должна закончиться на целевом блоке с видимым отступом, а не только запуском ссылки.

Color Changers

Color Changer меняет фон материала и базовый цвет текста при прокрутке до заданной точки. Он доступен только для Breakpoint.

Основные настройки:

• Scope: Article ограничивает фон материалом, Site растягивает его на ширину окна;
• Mode: Crossfade, Overlay или вертикальные Blocks;
• Attachment: Local прокручивается вместе с материалом, Fixed остаётся во viewport;
• Mixing: Timed смешивает слои по времени, Scroll — по прогрессу прокрутки;
• Duration задаёт длительность для Timed;
• Preview in editor показывает результат прямо на холсте.

У каждой метки задаются позиция Y, фон и цвет текста. Локально заданный цвет в текстовом виджете остаётся приоритетным.

Сравнение режимов на одной композиции должно показать характер перехода, не перегружая ролик всеми полями секции.

Основной рабочий пример показывает смену нескольких меток при прямой и обратной прокрутке, включая базовый цвет текста.