Container
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.
Content
Inner blocks alignment
You can align inner blocks vertically or horizontally:
Horizontal alignment and distribution
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:
Vertical alignment and distribution
When blocks are aligned vertically, they are placed from the top to the bottom by the left side:
How to align vertical placed blocks by the center?
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:
Navigation (links and pages)
You can attach any link to the container:
Or you can insert the link to another page to navigate between pages.
Fixation on the screen
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:
Image cover
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:
Blur
Containers can be blurred:
Blur is used for floating components to make them more visible under other blocks:
Full screen sizing
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 in community! We will answer you and then promise to improve the article within 3 days.
Last updated