Контейнера компонента![](anchor.svg)
Контейнерная часть охватывает функциональную часть компонента, отделяя его от расположения, в котором он находится. Основными ее целями являются:
поддержание свойств компонента, связанных с позиционированием, на любом типе макета инструментальной панели отдельно от его внешнего вида;
определять внешний размер и вид области, содержащей компонент;
быть постоянной общей частью каждого веб-компонента для нужд разработки.
Структура контейнера![](anchor.svg)
Структура контейнера почти всегда одинакова для любого компонента, единственное, что отличается, - это некоторые значения атрибутов.
![](component_container_markup.png)
Каждый компонент на инструментальной панели начинается с нескольких вложенных контейнеров <div>
с определенным набором атрибутов:
<div class="... ... ui-component js-{componentName}" id="{componentID}">
...
<div class="... ... container-scrolling">
Крайние и внутренние элементы <div>
являются основными и присутствуют в каждом компоненте. Между ними могут располагаться дополнительные элементы в зависимости от особенностей компонента или макета, в котором размещен компонент.
![]() | Обратите внимание, что в режиме редактирования инструментальной панели в части Контейнер присутствуют дополнительные HTML-обертки и классы, которые вы не найдете в режиме исполнения панели. |
Основные моменты, которые необходимо знать:
Стили, записанные во вкладке Свойства контейнера, по умолчанию применяются к первой обертке.
Первые два класса элементов HTML здесь - это динамически генерируемая тарабарщина вроде
sc-hhOBVt
илиiIsGzI
, которую следует игнорировать.Самая внешняя обертка хранит информацию о позиции компонента на макете, которая настраивается на вкладке свойств Свойства контейнера в редакторе свойств компонента.
Это единственный элемент в компоненте, который имеет дружественный человеку атрибут
ID
, и ID равен значению свойства Name компонента, назначенному в конструкторе Web UI.Класс
js-{componentName}
содержит динамическую часть с именем компонента, написанным в “верблюжьей” нотации (например,js-systemTree
).<div>
с классомcontainer-scrolling
отвечает за обслуживание свойства Выход за пределы контента в Свойствах контейнера.
![]() | Возможны изменения в классах, атрибутах и количестве оберток в зависимости от того, в какой компоновке в данный момент находится компонент. Значение этого можно узнать из статьи Разметка панелей. |