Настройки внешнего вида и настроек:
Name(обязательно) - имя компонента.
Direction(обязательно) - как расположены элементы внутри контейнера, вертикально или горизонтально. По умолчанию горизонтально.
Wrap(обязательно) - обертывание содержимого, когда оно выходит за границы контейнера. По умолчанию Nowrap
Alignment (обязательно) - выравнивание элементов в контейнере. Start по умолчанию.
Sizes(обязательно) - размеры контейнера. В пикселях или процентах. Ширина 100% по умолчанию
Max Width (обязательно) - максимальная ширина контейнера в пикселях или процентах. 100% по умолчанию.
Margin(обязательно) - внешний отступ. 0 по умолчанию.
Padding(обязательно) - внутренний отступ. 0 по умолчанию Изображение, градиент или наложение (не обязательно) - для фона.
Background color (не обязательно) - основной цвет для фона.
Border(не обязательно) - настройки границ компонента.
Visible(обязательно) - делает компонент видимым, если включен. По умолчанию включено.
Триггеры рабочего процесса:
- 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 vertica l [enum] - выравнивание компонента по вертикали;
- Margin[string] - margin компонента;
- Padding[string] - padding компонента;
- Border[string] - border компонента;
- Border radius [string] - радиус границы компонента;
- Background color [string] - цвет фона компонента;
- Visible [boolean] - состояние видимости компонента.
Пример использования
Контейнер можно использовать для группировки элементов. Например, для сборки формы из нескольких различных полей ввода:
