Containers are reusable custom components that can contain UI items, interactions, animations, etc. They can be used in various ways and have different behaviors, the most common being to:
- Group common UI items and behaviors and reuse them in different screens across your Proto.io project. This way you don’t have to recreate or copy them, saving time and allowing for much better maintenance, since changes made to the container itself update every instance of that container in your project.
- Create scrollable blocks of content and UI elements (view video tutorial)
Each container can be in any width and height size (in pixels). When adding a new container, a canvas with the defined container size appears. You can use that canvas to add UI elements and interactions. For a container to work, it has to be added to a screen (see Screens). After adding the container to a screen (or to another container), you can define the container viewable size which in many cases (like for scrollable containers or carousels) can be different (usually smaller) than the original container size.
The container canvas
The container canvas can be of any size in width (px) and height (px) and can be populated with UI items. Those items can have actions attached to them, just like with screens. You can modify the container canvas size at any time.