Редактор интерфейса

Проектирование интерфейса страницы выполняется с помощью редактора интерфейса. Для перехода к редактору откройте страницу проекта.

Взаимодействие с редактором интерфейса доступно в 2 режимах:

• режим макета - предназначен для создания интерфейса страницы: добавления элементов и настройки их свойств

• режим предпросмотра - используется для просмотра интерфейса и взаимодействия с его элементами

Обратите внимание: В режиме макета нельзя получить реальный ответ api, поэтому на макете вы всегда видите фейковые данные. Также в этом режиме работает только встроенная логика добавленных элементов - прикладная логика генерируется, когда страница собирается для предпросмотра. Поэтому открытие сайдбаров и диалогов, всплывающих панелей и пунктов меню выполняется в режиме предпросмотра

Режим макета

В режиме макета редактор интерфейса визуально разделен на две части:

• слева:
  • на вкладке Дерево элементов - дерево элементов, добавленных на страницу
  • на вкладке Конструктор страницы - палитра элементов, которые можно добавить на страницу
• справа - холст или макет страницы

Интерфейс вкладки Дерево элементов

Интерфейс вкладки Конструктор страницы

Действия со страницей в режиме макета

В режиме разработки макета доступны следующие действия:

• отмена и восстановление действия

• сохранение изменений

• редактирование свойств страницы

• скачивание страницы в формате JSON

• скачивание компонента (Angular / React)

Для выполнения действия воспользуйтесь соответствующей кнопкой или опцией меню в правом верхнем углу панели инструментов

Режим предпросмотра

Для перехода в режим предпросмотра нажмите кнопку Предпросмотр на панели инструментов

Предпросмотр страницы открывается в отдельной вкладке.

Здесь можно увидеть спроектированный интерфейс страницы вашего приложения, а также проверить взаимодействие с его элементами: проверить привязку динамических элементов к кнопкам и опциям меню

Действия со страницей в режиме предпросмотра

В режиме предпросмотра можно выполнить действия:

• обновить предпросмотр

• сделать скриншот страницы

• скачать JSON страницы

• скачать компонент (Angular / React)

• изменить тип рендеринга (Angular / React)

Для выполнения действия используйте соответствующую кнопку или опцию меню на панели Предпросмотр страницы