Просмотр кода страницы Структура элементов и адаптивный интерфейс

__NOTOC__

PRO версия XIOT-EDITOR основана на принципах современной веб-разработки и использует '''вложенную структуру элементов'''.  
Такой подход позволяет проектировать интерфейсы, которые корректно масштабируются, адаптируются под разные устройства и сохраняют стабильный внешний вид при изменении разрешения экрана.

Редактор поддерживает как адаптивные, так и позиционные интерфейсы, а также их комбинирование в рамках одного проекта.

----

== 🧱 Вложенная структура элементов ==

Базовым элементом интерфейса является '''блок'''.  
Каждый блок может содержать внутри себя другие блоки и элементы, формируя иерархическую структуру.

Типовой пример:

* Страница  
** Основной контейнер  
*** Виджет устройства  
**** Иконка  
**** Название  
**** Элементы управления  
*** Другой виджет  
** Панель навигации  
*** Кнопка «Назад»

Подобная структура полностью аналогична HTML-разметке, где один контейнер (div) может содержать вложенные элементы.

'''Вложенность элементов является основой адаптивного интерфейса и не зависит от разрешения экрана.'''

----

== 📐 Единицы измерения и масштабирование ==

В PRO версии используются относительные единицы измерения, рекомендованные для построения адаптивных интерфейсов.

=== Проценты (%) ===

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

Пример:
* создаются два блока;
* каждому задаётся высота '''50%'''.

Независимо от устройства:
* смартфон,
* планшет,
* настенная сенсорная панель,

блоки всегда занимают одинаковую долю пространства страницы.

[[Файл:Pro1 1.png|без|мини|660x660пкс]]
[[Файл:Pro 1 2.png|без|мини|659x659пкс]]

Это базовый принцип адаптивного макета.

=== Единицы em ===

Единицы '''em''' применяются для размеров виджетов и элементов управления.

Особенности:
* размеры элементов зависят от значения '''font-size''';
* при изменении масштаба интерфейса все элементы изменяются пропорционально;
* сохраняются пропорции, отступы и читаемость интерфейса.

Изменение font-size приводит к масштабированию всего приложения без нарушения структуры.

----

== 🧩 Подходы к построению интерфейса ==

PRO версия XIOT-EDITOR поддерживает два основных подхода к компоновке интерфейса.

=== 🔄 Адаптивный (резиновый) интерфейс ===

Адаптивный интерфейс строится на:
* вложенной структуре блоков;
* использовании % и em;
* отсутствии абсолютного позиционирования.

Характеристики:
* автоматическая адаптация под любое разрешение;
* корректная работа при смене ориентации экрана;
* единый интерфейс для всех типов устройств.

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

----

=== 📌 Позиционный интерфейс ===

Позиционный интерфейс применяется в случаях, когда заранее известно разрешение экрана.

Для этого:
* элементу задаётся CSS-свойство '''position: absolute''';
* после этого элемент можно свободно перемещать мышью в рабочей области;
* положение фиксируется относительно страницы.

Такой подход используется для:
* специализированных экранов;
* панелей с фиксированной компоновкой;
* визуальных схем.

----

=== 🔀 Комбинированный подход ===

На практике чаще всего используется комбинирование двух подходов.

Рекомендуемая схема:
* виджет проектируется адаптивным —  
  размеры в '''em''',  
  вложенные элементы в '''%''' и '''em''',  
  без абсолютного позиционирования;
* сам виджет размещается на странице с помощью '''position: absolute'''.

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

----

== 🎨 CSS-стили и стандарт веб-разработки ==

PRO версия XIOT-EDITOR использует полноценные '''CSS-стили''', соответствующие стандартам веб-разработки.

Поддерживаются основные группы свойств:
* размеры и ограничения (width, height, min/max);
* отступы и поля (margin, padding);
* шрифты и типографика;
* позиционирование;
* фон и цвета;
* рамки и скругления;
* тени и прозрачность;
* анимации и переходы;
* flex- и grid-компоновка.

Это обеспечивает:
* предсказуемое поведение интерфейса;
* высокий уровень гибкости;
* возможность использовать знания HTML/CSS без переобучения.

----

== 🧩 Виджеты как переиспользуемые компоненты ==

Виджет представляет собой самостоятельный компонент, включающий:
* структуру элементов;
* стили;
* логику;
* привязки к характеристикам и тэгам.

Виджеты можно:
* клонировать;
* переносить между страницами;
* сохранять в файл;
* использовать в других проектах.

Один раз созданный виджет может применяться многократно без изменения структуры.

----

== 🎯 Итог ==

PRO версия XIOT-EDITOR предоставляет профессиональные инструменты построения интерфейсов:

* вложенная иерархия элементов;
* использование % и em для масштабирования;
* поддержка адаптивного и позиционного подходов;
* комбинирование методов в одном проекте;
* полноценные CSS-стили;
* переиспользуемые виджеты.

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