Структура веб-компонентов

Семейство веб компонентов SberMobile включает в себя всевозможные строительные блоки для создания легко настраиваемого пользовательского интерфейса для любых целей. Несмотря на то, что они очень разные, у них есть много общего в разметке, в частности, общая композиция HTML-оберток и система имен классов. Также можно ожидать, что определенные шаблоны разметки и атрибуты будут встречаться в похожих компонентах или сложных компонентах, которые наследуют некоторые свои элементы от более простых.

Каждый компонент инструментальной панели, включая контейнеры, имеет одинаковый набор основных HTML-оберток, которые можно разделить на две группы:

• Контейнер компонента

• Элемент компонента

Каждый набор представлен несколькими HTML-контейнерами с различными атрибутами, имеющими частично предопределенные значения.

Технические подробности об этих двух частях можно узнать из статей Контейнер компонента и Элемент компонента.

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

Ищите сходство в разметке компонентов в следующих группах:

• Панель с вкладками, Панель с шагами, Карусель

• Системное дерево , Настраиваемое дерево

• Таблица данных, Классовая таблица данных, Поля экземпляра класса, Журнал событий, Список Контекстов

• Текстовое поле, Текстовая область, Числовое поле

• Выпадающий список, Выпадающее дерево, Выпадающее меню

• Дата/время, Время

• Диаграммы

Одинаковая разметка некоторых компонентов внутри группы означает, что вы можете написать глобальные стили для целых групп различных компонентов, воздействуя на общие элементы одним правилом CSS.

Больше полезной информации об общих структурах разметки внутри веб-компонентов вы найдете в других статьях этого раздела.