Tab Menu Tutorial

In this tutorial, you'll learn how to make a structure in which clicking a tab reveals the contents of that tab.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

Create the Tab Widgets

1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

2. Drag two button widgets onto the canvas from the Libraries pane.

3. Set the text of one button to Tab 1 and the other to Tab 2.

4. Select both buttons and use the Corner Visibility control in the Style pane to turn off the bottom corners. This will render both buttons with rounded corners on top and square corners on bottom (a tab shape).

Create the Content Widgets

5. Drag a rectangle widget onto the canvas and place it below the two buttons.

6. Give the rectangle a blue fill color and set its text to Tab 1 content.

7. Drag a second rectangle onto the canvas and place it off to the right of the other widgets.

8. Give the second rectangle the same blue fill color as the first and set its text to Tab 2 content.

2. Place the Content Rectangles in a Two-State Dynamic Panel

1. Right-click the Tab 1 content rectangle and select Create Dynamic Panel in the context menu.

2. In the Outline pane, hover your cursor over the new dynamic panel widget's item and click the Add State icon to the right.

3. Still in the Outline pane, select the Tab 2 content rectangle and drag it under and to the right of State 2. This will add it to that dynamic panel state and open the state on the canvas.

4. Move the Tab 2 content rectangle to (0,0) on the canvas.

5. Click Close at the top-right of the canvas or press ESC to exit state-editing mode.

Note

When creating your own tab controls, you can include any widgets you'd like in each of the dynamic panel's states.

3. Set the Dynamic Panel's State When the Tabs Are Clicked

1. Select the Tab 1 widget and click New Interaction in the Interactions pane.

2. Select the Click or Tap event in the list that appears, and then select the Set Panel State action.

3. Select the dynamic panel in the Target dropdown, and select State 1 in the State dropdown.

4. Click OK to save the action.

5. Repeat these steps with the Tab 2 widget, setting the dynamic panel's state to State 2.

4. Indicate Which Tab Is Active

Give the Tabs a Selected Style Effect

1. Select both tab widgets and click Add a style effect in the Interactions pane.

2. Choose Selected Style in the list.

3. In the block that appears, check the Fill Color property and select the same blue color that we used for the content rectangles.

Set the Tabs to Their Selected State When Clicked

4. Select the Tab 1 widget and click the + symbol at the bottom of the Click or Tap block in the Interactions pane.

   This will let us add a new action to the event.

5. Select the Set Selected/Checked action and target This Widget.

6. Click OK to save the action.

7. Repeat this for the Tab 2 widget.

Put the Tabs in a Selection Group

Putting the tab widgets in a selection group will ensure that only one of them can be in its selected state at a time.

8. Select both tab widgets and click the Show All icon at the top-right of the Interactions pane.

9. Enter Tab Control Group in the Selection Group field.

Make Tab 1 Selected by Default

10. Select Tab 1 and click the Show All icon in the Interactions pane.

11. Check the box for Selected.

5. Preview the Interaction

Preview the page and click the tabs to view their associated content.