#Мобильный макет

В NocoBase мобильный макет предназначен для создания отдельных навигации и страниц для мобильных устройств. По умолчанию он доступен по адресу /mobile, использует нижнюю панель вкладок для навигации первого уровня и лучше подходит для ввода и поиска данных, согласования и обработки задач на телефоне.

Мобильный макет и макет для компьютера используют одни и те же источники и бизнес-данные, однако их меню, маршруты и содержимое страниц настраиваются отдельно. Благодаря этому мобильные страницы можно организовать с учётом работы на телефоне, не привязываясь к структуре страниц для компьютера.

#Переход к мобильному макету и предварительный просмотр

По умолчанию откройте «Мобильная версия» в центре настроек или перейдите напрямую по адресу /mobile.

Страницы рекомендуется создавать в браузере на компьютере. В нём отображаются область предварительного просмотра мобильного макета и верхняя панель инструментов, где:

• «UI Editor» включает и выключает режим настройки интерфейса.
• «Предпросмотр на планшете» показывает страницу с шириной более крупного мобильного устройства.
• «Мобильный предпросмотр» возвращает области просмотра размер телефона.
• «QR-код» открывает текущий мобильный адрес на телефоне.

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

#Создание мобильной навигации

Для навигации первого уровня мобильный макет использует нижнюю панель вкладок. Сейчас на этом уровне в основном поддерживаются страницы и ссылки.

#Добавление страницы

1. Включите «UI Editor».
2. Нажмите кнопку добавления справа от нижней панели вкладок.
3. Выберите «Страница».
4. Укажите заголовок страницы и выберите значок.
5. После отправки формы откройте новую страницу и добавьте её содержимое.

#Добавление ссылки

Если нужно перейти на внутренний или внешний адрес, выберите «Ссылка», затем укажите заголовок, значок и URL.

Ссылка может открываться в текущем или новом окне — поведение зависит от её настроек.

#Настройка навигации

В режиме настройки интерфейса вкладки в нижней панели можно перетаскивать, изменяя их порядок. Для каждой вкладки также можно изменить заголовок и значок, настроить правила взаимосвязи, скопировать UID или удалить её.

Чтобы централизованно просматривать, показывать, скрывать и удалять мобильные маршруты, откройте «Центр настроек / Маршруты / Мобильные маршруты».

#Создание мобильной страницы

Сначала создайте и откройте мобильную страницу, затем добавляйте на неё блоки. Принцип построения содержимого страницы в целом такой же, как на компьютере: используйте блоки, поля и действия, чтобы организовать рабочее содержимое. При этом мобильная навигация и взаимодействие с некоторыми компонентами адаптированы к небольшому экрану.

#Добавление содержимого страницы

1. Откройте мобильную страницу, которую нужно настроить.
2. Убедитесь, что «UI Editor» включён.
3. Нажмите «Добавить блок» на странице.
4. Выберите таблицу, форму, подробное представление, фильтр или другой блок.
5. Настройте поля, действия и параметры блока.

#Использование вкладок страницы

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

1. Откройте настройки страницы и включите «Включить вкладки». Это также можно сделать в разделе «Центр настроек / Маршруты / Мобильные маршруты»: отредактируйте страницу и отметьте «Включить вкладки страницы».
2. Включите «UI Editor».
3. Нажмите «Добавить вкладку» справа от панели вкладок страницы.
4. Добавьте вкладку, затем настройте её название и содержимое страницы.

Если содержимого на мобильной странице немного, используйте одну страницу — включать вкладки необязательно.

#Мобильное взаимодействие с распространёнными компонентами

Распространённые компоненты страницы изменяют расположение и способы взаимодействия в мобильном макете. Например, содержимое в несколько колонок автоматически перестраивается в одну колонку, удобную для вертикального просмотра, поля выбора, даты и времени используют мобильные элементы выбора, а фильтры, связанные записи и вложенные страницы — интерфейсы, более подходящие для сенсорного управления.

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

#Страницы и вложенные страницы

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

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

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

#Управление маршрутами и правами доступа

Мобильные маршруты можно централизованно настраивать в менеджере маршрутов. Откройте «Центр настроек / Маршруты / Мобильные маршруты», чтобы создавать, редактировать, удалять, показывать и скрывать страницы и ссылки, а также настраивать вкладки страниц.

Права доступа к мобильным маршрутам настраиваются отдельно от маршрутов для компьютера. В настройках прав роли откройте «Мобильные маршруты» и выберите страницы, доступные текущей роли. Подробности приведены в разделе «Настройка прав доступа».

#Связь с макетом для компьютера

На основе одной таблицы данных можно создавать отдельные страницы в макете для компьютера и мобильном макете. Например, на компьютере можно обрабатывать данные в таблице с большим количеством полей, а на мобильном устройстве — использовать более простой список или форму для ввода данных на месте.

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

#Связанные материалы

• Обзор макетов UI — сценарии использования макета для компьютера и мобильного макета
• Макет для компьютера — макет по умолчанию и его адаптация к узким экранам
• Блоки — добавление рабочего содержимого на мобильную страницу
• Поля — настройка мобильных форм и полей отображения данных
• Действия — настройка действий на мобильной странице
• Менеджер маршрутов — управление мобильными страницами, ссылками и вкладками
• Настройка прав доступа — управление мобильными маршрутами, доступными роли