Гибкий дизайн

Инструментальные панели, созданные для Web UI, могут динамически адаптироваться под различные расширения экрана и размеры окна браузера. Такой подход широко известен как гибкий веб дизайн.

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

  • Тулбар конструктора Web UI содержит поле со списком Выбор разрешения, которое выбирает режим редактирования для различной ширины окна браузера

  • После того, как выбрана ширина окна, любые и изменения в сетке будут соответствовать выбранной ширине

  • Все изменения сетки отражаются в соответствующих строках таблицы Свойства расширения, которая принадлежит контейнеру редактируемой сетки (например, если выбрана ширина Tablet 800px, все изменения сетки будут сохраняться в строках с параметром Разрешение, равным 800).

Когда инструментальная панель отрисовывается во время выполнения, Web UI перестраивает ее компоновку каждый раз при изменении ширины окна браузера.

Для каждого компонента в контейнере с сеткой выбирается строка таблицы Свойства разрешения с наиболее релевантной шириной (указанной параметром Разрешение). Ограничения сетки (X, Y, ширина, высота), указанные в этой строке, используются для отрисовки компонента в сетке контейнера.

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