Ui-element-structure-and-responsive-layout

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

---

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

Каждый элемент — это блок.

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

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

- Страница

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

Это очень похоже на HTML-страницу, где есть блок (div) внутри блока.

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

---

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

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

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

Пример:

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

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

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

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

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

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.

---

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

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

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

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

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

---

🎯 Итог

В PRO версии XIOT:

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

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