> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/konteiner.md).

# Контейнер

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F5HqZEwGnoSN7aqwIQE5T%2Fimage.png?alt=media\&token=02adc7ee-f621-46d5-a2bf-2932d8680d5e) 

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

#### Свойства:

* *<mark style="color:purple;">layout</mark>*

Свойство для указания типа расположения дочерних элементов. Может принимать значения:

* **row** - позиционирование горизонтально "в ряд", соответствует *<mark style="color:green;">flex-direction: row</mark>*
* **column** - позиционирование вертикально "в колонну", соответствует *<mark style="color:green;">flex-direction: column</mark>*
* по умолчанию (без значения) - позиционирование последовательно

При установленном значении параметра, дочерние элементы контейнера получают свойство **fit** для параметров **width** и **height**, при установке такого значения соответствующие размеры будут пытаться занять всё доступное свободное пространство родителя в указанном направлении.

* *<mark style="color:purple;">scroll</mark>*

Свойство для определения способа  отображения контента, выходящего за рамки контейнера. Соответствует *<mark style="color:green;">css</mark>* свойству *<mark style="color:green;">overflow</mark>* Может принимать значения:

* по умолчанию (без значения) – в большинстве случаев, показывает содержимое за пределами контейнера
* **auto** – показывает полосы прокрутки, когда внутреннее содержимое не поместилось
* **hidden** – скрывает содержимое, которое не поместилось
* **visible** – показывает содержимое за пределами контейнера

{% hint style="info" %}
*<mark style="color:red;">Важно</mark>*. Если внутри контейнера предполагаются выпадающие списки, или всплывающие окна, возможно, имеет смысл задать значение **visible**, либо задать нужный размер контейнеру, поскольку при открывании выпадающего списка на контейнере могут появиться полосы прокрутки.
{% endhint %}

* *<mark style="color:purple;">maxWidth</mark>*
* *<mark style="color:purple;">maxHeight</mark>*

Определяет максимальный размер, до которого может увеличиваться контейнер при наполнении контентом, в случае, если его соответствующий линейный размер указан **auto**

Может принимать значения в *<mark style="color:green;">%</mark>* или *<mark style="color:green;">px</mark>*.

{% hint style="info" %}
*<mark style="color:red;">Важно</mark>*. При задании этих свойств в контейнере автоматически включится прокрутка, будьте осторожны при использовании внутри контейнера выпадающих списков.
{% endhint %}

* *<mark style="color:purple;">minWidth</mark>*
* *<mark style="color:purple;">minHeight</mark>*

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

Может принимать значения в *<mark style="color:green;">%</mark>* или *<mark style="color:green;">px</mark>*.

{% hint style="info" %}
*<mark style="color:red;">Важно</mark>*. Не влияет на минимальный размер таких элементов как модальные окна или уведомления.
{% endhint %}

* *<mark style="color:purple;">additionalClasses</mark>*

Поле для указания дополнительных *<mark style="color:green;">css</mark>* классов, которые будут применены к контейнеру. Свойство добавлено для ускорения стилизации контейнера с помощью утилитарных классов **bootstrap**. Например, можно быстро позиционировать дочерние элементы посередине контейнера, добавив в данное поле значение  *<mark style="color:green;">d-flex align-items-center justify-content-center</mark>*

* *<mark style="color:purple;">customStyles</mark>*

Свойство предусмотрено для более точной настройки стилей контейнера. Следует использовать в некоторых краевых случаях, когда другие настройки не позволяют добиться соответствия требуемому отображению. Включает в себя ряд наборных элементов *<mark style="color:purple;">items</mark>* со свойствами *<mark style="color:purple;">cssProperty</mark>*, *<mark style="color:purple;">cssValue</mark>*, которые соответствуют *<mark style="color:green;">css</mark>* свойству и его значению. Например, если необходимо указать центральное позиционирование текста внутри контейнера, нужно добавить в *<mark style="color:purple;">items</mark>* элемент со свойствами *<mark style="color:purple;">cssProperty</mark>*: **textAlign** и *<mark style="color:purple;">cssValue</mark>*: **center**

* *<mark style="color:purple;">borders</mark>*

Свойство определяющее внешний вид обводки контейнера. Включает дочерние параметры:-

1. *<mark style="color:purple;">borders.radius -</mark>* Свойство принимает любые [значения](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units), поддерживаемые текущей спецификацией *<mark style="color:green;">css</mark>*
2. *<mark style="color:purple;">borders.borderColor -</mark>* Свойство, определяющее цвет обводки. Принимает значения переменной цветовых тем из списка. Также можно задать название необходимой переменной вручную, если таковая объявлена в файле цветовой темы.

* *<mark style="color:purple;">events</mark>*

#### **События**:

&#x20;На данный момент поддерживаются следующие события контейнера:

* *<mark style="background-color:purple;">onInit</mark>* - срабатывает при отрисовке контейнера. Важно помнить, что в **runtime**, при изменении параметра контейнера *<mark style="color:purple;">hidden</mark>* на **false**, если он ранее был установлен в **true** событие *<mark style="background-color:purple;">onInit</mark>* будет вызвано снова
* *<mark style="background-color:purple;">onScrollBottom</mark>* - срабатывает при прокрутке контейнера до нижней границы контента
* *<mark style="background-color:purple;">onScrollRight</mark>* - аналогично до правой границы контента
* *<mark style="background-color:purple;">onClick</mark>* - срабатывает при клике на контейнер. Необходимо для случаев, когда в UI предусмотрены сложные элементы взаимодействия, для которых использование компонента Кнопка не удовлетворяет требованиям