Use the containers' menu in the left pane of the Proto.io Editor to add a container, navigate to a container, reorder containers, duplicate containers, delete a container, add a container to a screen, or even to another container canvas. You can also copy it to another project or export it. Selecting a container will bring up its Properties in the Inspector. You have the option to view thumbnails or a list.
Adding 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.
Navigate to a container / Reorder containers
When on the containers' 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 search for a container quickly. 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 the currently active canvas by clicking on the "Add to canvas" icon.
Furthermore, you can add a container to a screen or another container using the Actions menu (accessed by clicking on the Actions icon) of the specific container. The original container size is automatically set for the container UI item when adding a container to a canvas. That size may be, in several cases, larger than 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, you can change the size from the container item properties pane.
Duplicating a container
When duplicating a container, another container with the same properties and UI items is created. This functionality not only creates a 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.
Deleting a container
You can delete a container from the Actions menu (accessed by clicking on the Actions icon) of the specific container. If the deleted container was previously added to screens, you will notice a missing container placeholder on each screen where the container was added. You may delete that placeholder after deleting your container.
Video Tutorials
Learn more about how to create and use containers in our tutorials: Proto.io Essentials, Episode 2, which covers the very basics of containers, Reusable containers, and the Scrollable containers tutorial.