Container

Нажмите, чтобы скопировать

Используется для группировки элементов


Настройки внешнего вида и настроек:

Name (обязательно) - имя компонента.

Direction (обязательно) - как расположены элементы внутри контейнера, вертикально или горизонтально. По умолчанию горизонтально.

Wrap (обязательно) - обертывание содержимого, когда оно выходит за границы контейнера. По умолчанию Nowrap

Alignment (обязательно) - выравнивание элементов в контейнере. Start по умолчанию.

Sizes (обязательно) - размеры контейнера. В пикселях или процентах. Ширина 100% по умолчанию

Max Width (обязательно) - максимальная ширина контейнера в пикселях или процентах. 100% по умолчанию.

Margin (обязательно) - внешний отступ. 0 по умолчанию.

Padding (обязательно) - внутренний отступ. 0 по умолчанию Изображение, градиент или наложение (не обязательно) - для фона.

Background color (не обязательно) - основной цвет для фона.

Border (не обязательно) - настройки границ компонента.

Visible (обязательно) - делает компонент видимым, если включен. По умолчанию включено.

Container Settings


Триггеры рабочего процесса:

  • onCreate - срабатывает, когда элемент создается на странице;
  • onShow - срабатывает, когда компонент меняет свое состояние на видимое (отображается на странице);
  • onHide - срабатывает, когда компонент меняет свое состояние на скрытое (перестает отображаться);
  • onDestroy - срабатывает, когда компонент уничтожается;
  • onClick - срабатывает при нажатии на компонент.



Действия компонента:

Container get properties

Получает свойства контейнера.

Входные параметры:

  • Component Id [string] - идентификатор компонента контейнера.

Выходные параметры:

  • Width [string] - ширина компонентов;
  • Height [string] - высота компонента;
  • Flex direction [enum] - направление компонентов;
  • Wrap [enum] - обертывание компонентов;
  • Alignment horizontal [enum] - выравнивание компонента по горизонтали;
  • Alignment vertical [enum] - выравнивание компонента по вертикали;
  • Margin [string] - margin компонента;
  • Padding [string] - padding компонента;
  • Border [string] - border компонента;
  • Background color [string] - цвет фона компонента;
  • Visible [boolean] - состояние видимости компонента.


Container set properties

Получает свойства контейнера.

Входные параметры:

  • Component Id [string] - идентификатор компонента контейнера.

Выходные параметры:

  • Width [string] - ширина компонента;
  • Height [string] - высота компонента;
  • Flex direction [enum] - направление компонента;
  • Wrap [enum] - обертывание компонента;
  • Alignment horizontal [enum] - выравнивание компонента по горизонтали;
  • Alignment vertical [enum] - выравнивание компонента по вертикали;
  • Margin [string] - margin компонента;
  • Padding [string] - padding компонента;
  • Border [string] - border компонента;
  • Background color [string] - цвет фона компонента;
  • Visible [boolean] - состояние видимости компонента.


Container update properties

Обновление свойств контейнера

Входные параметры:

  • Component Id [string] - идентификатор компонента container;
  • Width [string] - ширина компонента;
  • Height [string] - высота компонента;
  • Flex direction [enum] - направление компонента;
  • Wrap [enum] - обертка компонента;
  • Alignment horizontal [enum] - выравнивание компонента по горизонтали;
  • Alignment vertical [enum] - выравнивание компонента по вертикали;
  • Margin [string] - margin компонента;
  • Padding [string] - padding компонента;
  • Border [string] - border компонента;
  • Border radius [string] - радиус границы компонента;
  • Background color [string] - цвет фона компонента;
  • Visible [boolean] - состояние видимости компонента.



Пример использования

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

example use containers