ProtoShare Tip: Adding Tabs to your Tabbed Panel

With the new palette released in ProtoShare 9, you can easily create a 3-tab tabbed panel by dragging and dropping a single State-Based Navigation component. This will generate a state with three values, one for each of the tabs, and content placeholders for the three tabs.

To add additional tabs to your tabbed panel, you will need to add new values to your current state and content for the new tab.

You can add the additional values to your state by accessing the Property Inspector for the Horizontal Tab Navigation component. In the Inspector under Navigation, you will find the attached state. Select the Edit State button and insert your new values to create the additional tabs.

Inserting a new state value

Once you have the new tab in your navigation, you will need to create content to display when that tab is selected. You can either make the new content out of new components or make a copy of one of the placeholders.

To make a copy of the placeholder content, you will start off by ungrouping the three content boxes that came with the tabbed panel. You can ungroup components by right-clicking the content and selecting Ungroup.

Now that you have ungrouped the content boxes, copy and paste to create another content box and change the visiblity for the new content box to only be visible when the new tab (or state value) is selected. You will now have sucessfully created a new tab in your tabbed panel.

The newly added tab

For additional help, you can check out our tutorial video on how to make a tabbed panel.

This entry was posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>