Tutorial / Mockplus RP / Components / Containers

Containers

Containers are effective custom components that can contain UI elements, interactions, animations, and so forth. They are often used to show dynamic UI content.

Panel

The Panel component is one of the most widely used containers. You can add as many elements and interactions as you need. The Panel component can be extended infinitely in width and height.

The inner components and elements will not influence the outer size or position of the Panel component.

Double click to enable the edit mode.

Click anywhere outside the editing area to disable the editing mode.

You can select multiple components to make a Panel container. To do so, select the components you would like to put in a Panel, right-click and choose “Convert to Panel”.

Content Panel 

The Content Panel is often used to achieve the effect of content switching. It is often used with sub-artboards to present dynamic content and complex interactions.

Here's an example of how you can create this dynamic content:

Here is how you can create such dynamic content:

First, drag the link point of the Content Panel to the desired sub-artboard to associate them with each other.

Then, delete, reorder, and manage the linked artboards by selecting the Stack Panel and clicking the "Enter" key.

Finally, create interactions for the secondary artboards to get it done.

Web View

The Web View component helps you embed a custom external web page into your prototype.

Drag it onto your artboard and double click the component to enter an external website address. Then, you can directly view that embedded web page when previewing the project. 

This component is available in the "Containers" section of our default component library. 

Property Settings

You can change the component details on the right-hand Property panel, such as enabling the responsive layout or adjusting its opacity. 

Under the "Extension" section, you can select "Fix position when scrolling" to create a fixed area or directly add a note. 

App Navbar

App Navbar offers an easy way for you to quickly create bottom navigation and tab bars with icons and labels for your mobile apps.

How to use App Navbar?

• Drag App Navbar from the Components Panel to use it directly;
• You can stretch it to customize its size for your needs. To resize it equally, please hold Shift and click to drag it.

How to set properties for APP Navbar?

• Head to the right-hand Property panel, where you can:
-- Set its label and icon properties;
-- Change its size, default color and selected color;
--  Show the indicator;
-- Swap its icons by double-clicking it to select its icon and clicking any one you need in the Icon Panel to get it switched.

Note: You may also click Advanced edit in the right-click menus to modify the details of the labels and icons, such as the icon and label styles, distance between the icon and label, and so on.

How to edit  APP Navbar?

To further edit its items, you can double-click on APP Navbar or press Enter to customize them for your needs.