Ui-element-structure-and-responsive-layout

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

---

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

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

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

- Страница

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

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

` внутри `

`.

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

---

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

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

1. 1. 1. 1. Проценты (%)

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

Пример:

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

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

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

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

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

1. 1. 1. 2. Единицы *em*

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

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

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

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

---

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

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

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

Это отличается от интерфейсов с фиксированным позиционированием, где:

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

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

---

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

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

Доступны все основные группы CSS‑свойств:

• размеры: width, height, min/max, auto
• отступы и поля: margin, padding
• шрифт: font-size, font-weight, font-family
• выравнивание: justify-content, align-items
• позиционирование: position, left/right/top/bottom
• фон: background, background-color, градиенты
• рамки: border, border-radius
• тени: box-shadow, text-shadow
• прозрачность: opacity
• анимации и переходы: transition, transform
• отображение: display, flex, grid

Использование CSS делает интерфейс XIOT:

• гибким и современным;
• предсказуемым в работе;
• понятным для тех, кто знаком с HTML/CSS.

Поскольку это стандарт веб‑разработки, существуют тысячи обучающих материалов, видео и статей. Любой опыт в верстке сайтов напрямую применим в PRO версии XIOT‑EDITOR.

---

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

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

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

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

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

---

📱 Почему это лучше классических систем

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

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

---

🎯 Итог

В PRO версии XIOT:

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

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