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.
The containers menu
Use the containers menu in the left pane of the Proto.io Editor to add a container, navigate to a container, reorder containers, duplicate container, delete a container, or add a container to a screen, or even to another container canvas. Selecting a container will bring up its Properties in the Inspector. You have the option to view thumbnails or a list.
Adding a new container / Container properties
When adding a new container you are presented with the properties of that container. The container properties are:
- Title – Pick a title that’s representative of the container’s objective, for easier retrieval and navigation.
- Width – The width of your container in pixels. You can easily choose to multiply it by 2, 3, or 4 times the screen width.
- Height – The height of your container in pixels. You can easily choose to multiply it by 2, 3, or 4 times the screen height.
- Container background – Pick a background color for your container or leave it transparent.
When having a container with more than one States, then the container properties can be edited at the container state properties.
You can resize a container (through resize handles) when you double-click on its title while having it open for editing (canvas area).
Navigate to a container/ Reorder containers
When on the container menu, you can hover over the container list. As you hover, containers are highlighted. If you then click on the highlighted container title, the selected container is loaded in the main canvas area of the Editor. You can use the search tool above the containers listing to quickly search for a container. Additionally, you can reorder the containers by drag and drop in the list menu.
Adding the container to a screen, or another container canvas
You can add a container to a screen, or another container canvas by clicking on the relevant 'Attach container' icon when you hover over it. When adding a container to a canvas the original container size is automatically set for the container UI item. That size may be in several cases larger that your device’s screen/canvas size. In such a case you may need to resize the container after adding it to the screen. If the resize handles are not visible on your screen due to the container’s large size, then you can change the size properties from the container item properties pane.
Duplicate a container
When duplicating a container, another container with the exact same properties and UI items is created. This functionality not only creates an exact replica of the container and UI items, but also re-creates and re-maps all the actions of the duplicated container UI items with new item mappings.
Delete a container
You can delete a container by clicking on the delete icon that appears next to it when you hover over its title/thumbnail. If the deleted container was previously added to screens then you will notice a missing container placeholder on each screen where the container was added to. You may delete that placeholder after deleting your container.
Learn more about how to create and use containers in our tutorials: Proto.io Essentials, Episode 2, which covers the very basics on containers, Reusable containers, as well as the Scrollable containers tutorial.