Container
Last updated
Last updated
The main purpose of the Container component is to act as separate host for other child components. It groups a set of components together in a dedicated frame, arranged on a separate grid from the main application canvas. A Container can be made scrollable to create a scroll container to place larger content than the available space.
When the dimensions of a Container on the canvas are adjusted, its content resizes dynamically.
Use this component to create separate areas in your app for specific component groups. The styling options allows these blocks to stand out visually compared to the rest of the application.
The Container component offers the following configuration properties.
Header text
stringWithJs
'Header'
When the "Show Header" property is set to true, the text of this property is displayed in the header of the container. This configuration is not accessible in the properties panel otherwise.
Scrollable
boolean
true
Determines whether the container should allow scrolling in case its content is larger than the container itself. If disabled, overflowing content is hidden and not accessible to the end user.
Show Header
boolean
false
When set to true, the container renders a text header, which can be modified in the "Header text" configuration.
A container with "Scrollable" set to false is still scrollable in the app editor, but highlights overflowing content with a red background.
The purpose of this is to still allow the app editor to freely modify the container content, while aware that some content will be inaccessible for the app user. The production version does not scroll for such a container, and cuts off overflowing content.
The Container does not offer any events.
The Container exposes the following API in the JavaScript runtime environment.
headerText
string
Current string value of the "Header text" configuration.
setHeaderText(value)
(value: string) => void
Sets the header text to the provided string value.
setShowHeader(value)
(value: boolean) => void
Adjusts the flag whether the header text should be displayed to the provided boolean value.
showHeader
boolean
Current boolean value of the "Show header" configuration.
