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

Key	Type	Description	Default Value
"autoScrollDuration"	Number	The duration of a complete scroll if auto scrolling is enabled.	0
"autoScrollMode"	AutoScrollMode	Mode for auto scrolling.	"disabled"
"autoScrollPause"	Number	The pause between scrolls if auto scrolling is enabled.	0
"blurRadius"	UnitSize	Radius of the blur effect.	20
"blurTarget"	String	The target for the blur effect. The layer, this is the name of, needs to have the blur type "target".	null
"blurType"	BlurType	Type 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"	LayerType	Each 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"	Number	The zoom factor after a double tap.	1
"horizontalScrollIndicator"	Boolean	Specifies whether a scroll indicator should be displayed if this container can scroll horizontally.	false
"initialScale"	Number	The initial zoom factor.	1
"maxScale"	Number	The maximum zoom factor.	1
"minScale"	Number	The minimum zoom factor.	1
"scroll"	Scroll	The direction in which the container should scroll.	"none"
"swipeLeftActions"	Array	Actions that are fired after swiping to the left in the container.	null
"swipeRightActions"	Array	Actions that are fired after swiping to the right in the container.	null
"verticalScrollIndicator"	Boolean	Specifies whether a scroll indicator should be displayed if this container can scroll vertically.	false

Inherited

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"accessibilityAppendState"	String	Defines this layer appends its state to the accessibility text.	null
"accessibilityText"	String	Text for accessibility navigation. Can be translated.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"focusColor"	Color	The 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"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"isAccessibilityElement"	String	Defines if this layer is important for accessibility navigation. The default depends on the layer type.	null
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"pressedColor"	Color	The 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"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Container sizing

Show ExampleHide Example

Two container layers, one with a static size and one with dynamic sizing based on the content.

{
  "type": "container",
  "constraints": [
    {
      "type": "size",
      "height": "200pt",
      "width": "345pt"
    }
  ],
  "children": [
    {
      "type": "image",
      "value": "asset://cat.jpg",
      "scaleType": "scaleAspectFill"
    }
  ]
}

{
  "type": "container",
  "children": [
    {
      "type": "text",
      "value": "$lang(container01Content01)$",
      "lineBreakMode": "wordWrap",
      "maxLines": -1,
      "state": "visible",
      "states": {
        "visible": {
          "hidden": false
        },
        "hidden": {
          "hidden": true
        }
      },
      "conditions": [
        {
          "state": "hidden",
          "conditions": {
            "mode": "equal",
            "left": {
              "context": "variable",
              "field": "containerContent"
            },
            "right": {
              "value": "1"
            }
          }
        }
      ]
    },
    {
      "type": "text",
      "value": "$lang(container01Content02)$",
      "lineBreakMode": "wordWrap",
      "maxLines": -1,
      "state": "hidden",
      "states": {
        "visible": {
          "hidden": false
        },
        "hidden": {
          "hidden": true
        }
      },
      "conditions": [
        {
          "state": "visible",
          "conditions": {
            "mode": "equal",
            "left": {
              "context": "variable",
              "field": "containerContent"
            },
            "right": {
              "value": "1"
            }
          }
        }
      ]
    }
  ]
}

If the container itself does not have a specified height, it adopts the height of its child layers.

Example 2: Zoomable container

Show ExampleHide Example

The zoom factor can be customized with the fields minScale, maxScale, initialScale and doubleTapScale.

{
  "type": "container",
  "minScale": 1,
  "maxScale": 5,
  "initialScale": 1,
  "doubleTapScale": 3,
  "children": [
    {
      "type": "image",
      "value": "asset://cat.jpg",
      "scaleType": "scaleAspectFit"
    }
  ]
}

Zoom in and out by double-tapping or pinching.

Example 3: Scrollable container

Show ExampleHide Example

The scroll direction can be specified in the scroll field.

{
  "type": "container",
  "scroll": "vertical",
  "verticalScrollIndicator": true,
  "children": [
    {
      "type": "text",
      "value": "$lang(container01Content01)$",
      "lineBreakMode": "wordWrap",
      "maxLines": -1
    },
    {
      "type": "image",
      "value": "asset://cat.jpg",
      "scaleType": "scaleAspectFit"
    },
    {
      "type": "text",
      "value": "$lang(container01Content02)$",
      "lineBreakMode": "wordWrap",
      "maxLines": -1
    }
  ]
}