Fabled
Docs
How-to
Настройка фрейма в The Forge

Настройка фрейма в The Forge

Обновлено 20 мая 2026 г.

2 мин чтения

Обновлено 20 мая 2026 г.

Шаг 1: Откройте меню создания и выберите New Frame

Откройте The Forge. Найдите кнопку вызова меню создания в дереве The Forge (значок 1) и нажмите её.

Выберите New Frame из выпадающего списка. Fabled создаёт пустой фрейм и открывает панель настройки.

Откройте меню создания и выберите New Frame

Шаг 2: Назовите фрейм и укажите игру и категорию

Введите имя в поле названия (значок 1). Выберите целевую игру и категорию контента с помощью селекторов под полем названия.

Используйте правую панель, чтобы выбрать папку в The Forge. Размещение фрейма в правильной папке позволяет держать его рядом с элементами, которые будут его использовать.

Назовите фрейм и укажите игру и категорию

Шаг 3: Откройте редактор фреймов и осмотрите корневой контейнер

После сохранения настроек открывается редактор фреймов. Большая центральная область — это корневой контейнер, ваш холст для построения макета.

Заголовок страницы обновляется, подтверждая имя фрейма. Корневой контейнер отображает подсказку о перетаскивании компонентов из палитры слева.

Откройте редактор фреймов и осмотрите корневой контейнер

Шаг 4: Перетащите компонент из палитры на холст

В левой палитре перечислены доступные строительные блоки: Text, Image, Video, Table, Icon и Container.

Перетащите любой компонент из палитры на холст корневого контейнера. Компонент появится как позиционированный блок внутри макета фрейма.

Перетащите компонент из палитры на холст

Шаг 5: Выберите компонент и привяжите его к данным элемента

Щёлкните по компоненту на холсте, чтобы выбрать его. Справа откроется панель свойств этого компонента.

Введите выражение привязки в поле содержимого. Используйте шаблон {{element.name}}, чтобы подставить текст, или {{element.portrait}}, чтобы обратиться к полю изображения. Fabled разрешает эти выражения во время рендеринга относительно элемента, которому назначен данный фрейм.

Повторите для каждого компонента в макете, чтобы связать весь фрейм с источником данных. Сохраните фрейм, когда макет готов.

Выберите компонент и привяжите его к данным элемента