Skip to main content
Version: 4.60

container

Creates a container in which you can zoom and scroll. Elements such as text, color, etc. in a container are specified as children. With containers you can use the constraints to divide the screen again. You can only use anchors between elements in the same container.

Field Configurations

KeyTypeDescriptionDefault Value
"autoScrollDuration"NumberThe duration of a complete scroll if auto scrolling is enabled.0
"autoScrollMode"AutoScrollModeMode for auto scrolling."disabled"
"autoScrollPause"NumberThe pause between scrolls if auto scrolling is enabled.0
"blurRadius"UnitSizeRadius of the blur effect.20
"blurTarget"StringThe target for the blur effect. The layer, this is the name of, needs to have the blur type "target".null
"blurType"BlurTypeType of blur for this container. "glass" is the iOS "Liquid Glass". On Android it is the same as "blur". "target" is android only and is the background for another container."none"
"children"LayerTypeEach layer can be a child of the container layer. Any number of children can be created within a container layer.null
"consumesKeyboard"Boolean(iOS only) Consumes keyboard. Sometimes needed that the inital ios keyboard is not overlapping important input fields.false
"doubleTapScale"NumberThe zoom factor after a double tap.1
"horizontalScrollIndicator"BooleanSpecifies whether a scroll indicator should be displayed if this container can scroll horizontally.false
"initialScale"NumberThe initial zoom factor.1
"maxScale"NumberThe maximum zoom factor.1
"minScale"NumberThe minimum zoom factor.1
"scroll"ScrollThe direction in which the container should scroll."none"
"swipeLeftActions"ArrayActions that are fired after swiping to the left in the container.null
"swipeRightActions"ArrayActions that are fired after swiping to the right in the container.null
"verticalScrollIndicator"BooleanSpecifies whether a scroll indicator should be displayed if this container can scroll vertically.false

Inherited

From Base Layer

Base Layer

Field Configurations

KeyTypeDescriptionDefault Value
"_value"Value[PREVIEW] Dynamic value of the layer.null
"accessibilityAppendState"StringDefines this layer appends its state to the accessibility text.null
"accessibilityText"StringText for accessibility navigation. Can be translated.null
"actions"ActionListList of actions, which will be executed when the layer is tapped.null
"borderColor"ColorThe color of the border in hex color value.null
"borderRadius"UnitSizeThe radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.0
"borderWidth"UnitSizeThe width of the border.0
"bottomLeftRadius"UnitSizeRadius for the bottom left corner.0
"bottomRightRadius"UnitSizeRadius for the bottom right corner.0
"classes"ArrayList of classes for layer styles.null
"conditions"ConditionsList of conditions to alter the layer state.null
"constraints"ConstraintsA list of constraints defining the position of the layer in a layout.null
"consumesKeyboard"BooleanThis layer will be used to shrink, if a keyboard is shown.null
"dataKey"StringName for assigning data to this layer.null
"focusColor"ColorThe highlight color of this layer when it is focused. Mainly used on TV. If no color is provided, the pressedColor will be used.null
"hidden"BooleanIndicates whether the layer is hidden. Default: false.false
"isAccessibilityElement"StringDefines if this layer is important for accessibility navigation. The default depends on the layer type.null
"layerRotation"NumberThe layer is rotated by the specified degree.0
"name"StringUnique name in the layout. Used for alignment or actions.null
"opacity"NumberThe opacity of the layer.1
"overInsetBottom"BooleanDetermines if this layer ignores the save space at the bottom of the device.false
"overInsetTop"BooleanDetermines if this layer ignores the save space at the top of the device.false
"pressedColor"ColorThe highlight color of this layer when it is pressed. Mainly used on TV. If no color is provided, the focusColor will be used.null
"safeArea"SafeAreaTypeObjectDetermines the safe area behaviour.null
"shadowElevation"NumberThe elevation of this layer for casting shadows.0
"state"StringThe state the layer will use as default."default"
"states"LayerStatesA list of named states that affect the appearance of the layer.null
"topLeftRadius"UnitSizeRadius for the top left corner.0
"topRightRadius"UnitSizeRadius for the top right corner.0
"touchFeedback"TouchFeedbackDetermines if the layer should show a touch feedback if touched."visible"
"trackingKey"StringDefines a key for a scroll event.null
"type"LayerTypeThe type of the layernull
"value"Value(Initial) value of the layer.null

Examples

Example 1: One container within another.

Goal: Create two containers, both with rounded corners.

To achieve this the following code can be used:

{
"type": "container",
"borderRadius": "20pt",
"borderWidth": "1pt",
"borderColor": "#f25abf",
"constraints": [
{
"type": "pos",
"x": "20%",
"y": "20%"
},
{
"type": "size",
"width": "60%",
"height": "30%"
}
],
"children": [
{
"type": "container",
"borderRadius": "20pt",
"borderWidth": "1pt",
"borderColor": "#f3f3f3",
"constraints": [
{
"type": "pos",
"x": "5%",
"y": "5%"
},
{
"type": "size",
"width": "90%",
"height": "40%"
}
],
"children": [
{
"type": "color",
"value": "#34a7c9",
"constraints": [
{
"type": "pos",
"x": "0",
"y": "0"
},
{
"type": "size",
"width": "100%",
"height": "100%"
}
]
}
]
}
]
}

One container was created inside th other container as a child. The child container contains a fullsized color layer.

Result:

Screenshot of the app showing the results of the sample code from Example 1.
A container layer has been created.