Ui-element-structure-and-responsive-layout

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

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

Каждый элемент — это блок. Блоки могут содержать другие блоки, а те — свои вложенные блоки и так далее.

Пример структуры:

Страница

 * Главный блок  
   * Виджет устройства  
     * Иконка  
     * Название  
     * Кнопки  
   * Следующий виджет  
 * Нижняя панель  
   * Кнопка «Назад»

Это очень похоже на HTML-страницу, где есть `

` внутри `

`.

Такая структура автоматически адаптируется под любой размер экрана.

📐 Относительные размеры: % и em

В XIOT рекомендуется использовать два основных типа единиц:

1. Проценты (%) Используются для построения каркаса страницы.

Пример:

создаём два блока;
первому задаём ширину 50%;
второму — тоже 50%.

Какой бы ни был экран устройства:

маленький телефон,
планшет,
сенсорная панель на стене —

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

Это основа адаптивного макета.

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

Эти элементы:

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

em привязывается к `font-size`. Если изменить размер шрифта — изменится весь виджет целиком, сохранив пропорции и не ломаясь.

🔄 Масштабируемые интерфейсы

Благодаря вложенной структуре:

виджеты размещаются внутри главного блока;
главный блок заполняет страницу;
элементы внутри него автоматически распределяются;
если элементов слишком много — главный блок **прокручивается**.

Это отличается от традиционных решений, где:

элементы ставят вручную на фиксированные координаты;
интерфейс «ломается» при изменении экрана;
требуется ручное создание отдельных макетов под каждый размер.

В XIOT достаточно создать виджет один раз — и он будет работать на любом устройстве.

🧩 Виджеты как компоненты интерфейса

Виджет — это тот же элемент, но с вложенными дочерними элементами:

иконка;
кнопки;
индикаторы;
привязки к характеристикам и тэгам.

Благодаря вложенности:

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

📱 Преимущества вложенной структуры

📐 **автоматическая адаптация** — всё строится в процентах и em;
🔁 **масштабирование интерфейса одним параметром** — меняем `font-size`, меняется всё приложение;
🧩 **элементы собираются в виджеты**, виджеты легко копируются;
📌 **нет фиксированной привязки к углам экрана**;
🚀 **быстрая сборка интерфейса** за счёт готовых компонент;
📦 **один дизайн — любой экран**.

🎯 Итог

В PRO версии XIOT:

структура элементов **вложенная**, как в современных веб-интерфейсах;
используются относительные размеры (% и em), обеспечивающие адаптивность;
элементы группируются в виджеты, которые можно многократно использовать;
интерфейс автоматически подстраивается под любые устройства;
приложение сохраняет внешний вид и масштаб даже при изменении `font-size`.

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