Tabs

Unlike static content, you can change dynamic content without having to switch screens; you will find a few examples here that will allow you to go deeper into the capabilities of Justinmind Prototyper to do a simulation. Mainly we will use the Dynamic Panels component, but the methodology can easily be extrapolated to other cases.

This is one of the most common ways to organize information on a single screen: each tab displays different content that becomes active when a user clicks on it. Use the Dynamic Panels component to group content in different panels or layers and decide which one to display.

To create tabs, drag the Dynamic Panels component to the canvas.
Once positioned, it shows us the area reserved for the active panel, its name and the "+" icon with which we can create as many layers as need (in this example, three).
Access them to assign their content by first selecting the Dynamic Panels component and then the gray label that corresponds to the panel you wish to work on.
To add screen components, drag them from the palette and drop them on top.

To give a tab form to a text, align it in the center vertically and horizontally. Then, in Properties, indicate which border you want; you can customize it by indicating that the lower part not be displayed, or by rounding off the corners to reinforce the graphics. Once the first tab is drawn, copy and paste it twice.

When the graphic part is complete, add interactivity so that the content is displayed when the user clicks on the buttons you simulated. All the interactions that can be defined between the user and the selected element are in the Events view, next to the Properties view. A dialog box opens when you click the Add Interaction button, where you can specify the actions to be taken after a user clicks on a tab (for example, display content). To do this, choose Show/Hide, select the panel you want displayed and indicate that it must be displayed: you don’t need to hide the others since only one can be active. Then repeat the process with the other two tabs. Click the Simulate button to see how different content is displayed based on the tab selected.

Tip: if you want to change the panel and highlight the tab selected, move the tabs inside the panels and change the style of each panel.

Back to all Tutorials