Container

A container is an abstract delimiter, that is, an control that contains other controls that can be included or removed.

Style

Appearance

Background color : The option to modify the background of your control allows you to personalize its appearance. When you click on it, a window will open that will allow you to select from various color variables, such as your primary or secondary tone, or even enter a specific hexadecimal code. In addition, you will find other settings that will allow you to further customize the background of your control.

Property to modify : "backgroundColor"

Data to send : To select a color value, choose an option within the "Color value" section in the entry options, or alternatively, send the following object: {type: "custom", value: "(hexadecimal color code)"}.

Background image : This option allows you to change the background of your container with an image. When you click on it, a popup window with a gallery of images will open, where you can select the one you like the most. You will find various options such as:

• Upload file: Upload a PNG, JPG or SVG file from your computer and select it.

• My images: Select a previously uploaded image.

• My SVGs: Find your previously uploaded SVG files.

• Unsplash: Access a library of preloaded images by the platform.

• From URL: Display an image from its URL address.

With these options, you can customize the background of your container with the image that best suits your needs.

Image Source : This option allows you to change the background of your container with an image. When you click on it, a popup window with a gallery of images will open, where you can select the one you like the most. You will find various options such as:

• Upload file: Upload a PNG, JPG or SVG file from your computer and select it.

• My images: Select a previously uploaded image.

• My SVGs: Find your previously uploaded SVG files.

• Unsplash: Access a library of preloaded images by the platform.

• From URL: Display an image from its URL address.

With these options, you can customize the background of your container with the image that best suits your needs.

Resize mode : This option allows us to adjust the selected image in different ways, with various options such as:

• Cover: adapts the image to display throughout the control.

• Contain: proportionally adjusts the image to display within the dimensions of the control.

• Stretch: stretches the image to fit the width of the control.

• Repeat: repeats the image horizontally and vertically to cover the dimensions of the control.

• Center: centers the image in the control, maintaining the same distance from the edges both horizontally and vertically.

With these options, you can customize the way the image is displayed in your control, adapting it to your needs and preferences.

Borders

Border Width: This option allows you to add a border to your control, from the outside to the inside of it. You can modify the border on the top, right, bottom, and left sides of the control. You can adjust each of them individually or anchor them to have the same proportion every time you modify one. The value entered is numerical and expressed in pixels.

With these options, you can customize the border of your control and adjust it to your design needs.

Border Radius: This option allows you to modify the rounding of the corners of your controls. You can adjust the top-right corner, bottom-right corner, bottom-left corner, and top-left corner. You can modify each of them individually or anchor them to have the same proportion every time you modify one. The value entered is numeric and expressed in pixels. The higher the value, the greater the rounding of the corner.

With these options, you can customize the rounding of the corners of your control and adjust it to your design needs.

Border color : The option to modify the color of your control's border gives you the possibility to personalize its appearance. When you click on this option, a window will open that will allow you to choose from various color variables, such as your primary or secondary tone, or even enter a specific hexadecimal code. Additionally, you will find other settings that will allow you to further customize the background of your control.

Border style: This option allows you to modify the border style of your control, offering you three different options to choose from: "dotted", "dashed", and "solid".

Dimentions

Size: This option allows you to configure the size of your control both in height and width. It has two measurement systems: percentage (%) and pixels (px).

In the percentage system, you can enter a numerical value from 0 to 100, and the size of the control will automatically adjust to the percentage indicated with respect to the size of the container that contains it. For example, if you indicate a size of 50%, the control will occupy half of the screen, regardless of the size of the device. To activate this option, make sure that the corresponding icon is in blue.

On the other hand, in the pixel system, you can indicate a numerical value to determine the size of the control in pixels. This measurement will remain constant, regardless of the dimensions of the device. You can indicate any number of pixels between 0 and the maximum allowed. To activate this option, make sure that the corresponding icon is in gray.

Height Auto : This option allows your control to adjust automatically to its internal content, meaning its size will grow or shrink to fit the content, even if the internal controls exceed the size of the main control. Please note that internal controls must have their size set in pixels, as it is not logically possible to adapt them if they are configured in percentage. This is because there is no value within the control to determine the percentage that the internal controls should occupy.

Layout

Direction: This option allows you to modify the direction in which the controls you place inside your container are placed, giving you the option to choose from 1. top, 2. right, 3. bottom, and 4. left. This means that each time you place a control, it will be positioned next to the control where you place it, in the selected direction.

Scroll: This option allows you to add a scroll to your control so that you can place an unlimited number of controls inside it, either horizontally or vertically, and enable the user to navigate through them easily. However, it's important to note that when this option is activated, the internal controls must have their size configured in pixels, as if they are configured in percentage, they may grow indefinitely.

Control z-index: This option allows you to adjust the position of your control in relation to other controls that overlap it or are located beneath it. You can modify the position value by increasing or decreasing it, even with negative numbers, with 0 as its original position value.

Margins

Inner margin : This option allows you to modify the internal margin of your control, providing a separation from its border towards the inside and giving a margin of separation to the internal controls. You must enter a numerical value represented in pixels.

Outer margin : This option allows you to add an external margin to your control, which means it will add a margin starting from the edge of your control outwards, marking a separation from the controls around it. You must enter a numerical value that will be represented in pixels. You can modify all margins at the same time or disable the chain and modify them individually.

Shadows

Presets: This option allows you to add shadows to your control with different styles. In order for the shadows to be displayed correctly, it is mandatory that your control has a background color enabled.

Position absolute : This option allows you to position your control in an absolute manner, meaning that the position of your control on the screen is fixed at the initial position of x and y at 0, regardless of the position of other nearby elements. This allows for precise placement of elements in a graphical user interface.

Data

Control data

Control type :

Control name :

Enable dynamic loading :

Control is hidden :

Control input data :

Layout

Split percentage:

Lock Container

Events & EventOutput

onPress

onReachEnd

onRefresh

onScrollBeginDrag

onScrollEndDrag

onLongPress

Basic Properties

{
        "containerType": "wrapper",
        "controls": [
            {
                "containerType": "inner",
                "id": "tfPYUMd2wdhCYv5F6FW3pP",
                "name": "container",
                "style": {
                    "alignItems": "center",
                    "flexDirection": "column",
                    "height": {
                        "unit": "%",
                        "value": 100
                    },
                    "justifyContent": "center",
                    "overflow": "hidden",
                    "paddingBottom": 0,
                    "paddingLeft": 0,
                    "paddingRight": 0,
                    "paddingTop": 0,
                    "width": {
                        "unit": "%",
                        "value": 100
                    }
                },
                "tag": "View"
            }
        ],
        "id": "pf7t9epLv5FTV1qjvZac7L",
        "isDynamicLoadingEnabled": false,
        "lock": false,
        "name": "container",
        "style": {
            "flexDirection": "column",
            "height": {
                "unit": "px",
                "value": 50
            },
            "heightAuto": false,
            "overflow": "hidden",
            "paddingBottom": 0,
            "paddingLeft": 0,
            "paddingRight": 0,
            "paddingTop": 0,
            "width": {
                "unit": "%",
                "value": 100
            }
        },
        "tag": "View"
    }
}