Container
Last updated
Last updated
The Container block is the cornerstone of all applications built on our No Code Platform for creating Telegram Mini Apps. It serves as the primary building block for structuring and organizing your app's content. By grouping and aligning other blocks within a Container, you can create complex and responsive layouts that enhance user experience.
You can align inner blocks vertically or horizontally:
When you align blocks horizontally, inner blocks are placed from the left to the right each after each:
In this case, you can distribute blocks (to the left, in the center, between the container, etc.):
Moreover, if inner blocks are different in size, you can move them between top and bottom corner of the container:
When blocks are aligned vertically, they are placed from the top to the bottom by the left side:
To align vertically aligned blocks by the center, you need to add inner blocks and place blocks into them with the following structure:
In this case, blocks will be displayed like here:
You can attach any link to the container:
Or you can insert the link to another page to navigate between pages.
The container can be fixed to the top or bottom side of the screen. This is needed to achieve “floating” effect for toolbar or bottom menu:
To make the container floating, select isFixed:
You can upload an image to the background of your container:
Also, you need to select an image placement when the image is too big:
Keep in mind that containers do not have the own "size". Therefore, other blocks needs to be placed in the container. In the example we have an empty transparent block in the container:
Containers can be blurred:
Blur is used for floating components to make them more visible under other blocks:
You can make the height of the container to fix 100% of the screen:
If inner blocks take more space that the screen height, the height of the container will be increased.
Something unclear in docs or you know how to improve article? Message us or ask community! We will answer you and then promise to improve the article within 3 days.
