In this tutorial, you'll learn how to make a structure in which clicking a tab reveals the contents of that tab.
1. Widget Setup
Create the Tab Widgets
Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.
Drag two button widgets onto the canvas from the Libraries pane.
Set the text of one button to
Tab 1and the other to
Set the fill color of the Tab 1 button to blue with the Fill Color selector in the Style pane or style toolbar. Set Tab 2's fill color to red.
- 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
Drag a rectangle widget onto the canvas and place it below the two buttons.
Give the rectangle a blue fill color and set its text to
Tab 1 content.
Drag a second rectangle onto the canvas and place it off to the right of the other widgets.
Give the second rectangle a red fill color and set its text to
Tab 2 content.
2. Place the Content Rectangles in a Two-State Dynamic Panel
Right-click the Tab 1 content rectangle and select Create Dynamic Panel in the context menu.
In the Outline pane, hover your cursor over the new dynamic panel widget's item and click the Add State icon to the right.
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.
Move the Tab 2 content rectangle to (0,0) on the canvas.
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
Select the Tab 1 widget and click New Interaction in the Interactions pane.
Select the Click or Tap event in the list that appears, and then select the Set Panel State action.
Select the dynamic panel in the Target dropdown, and select State 1 in the State dropdown.
Click OK to save the action.
Repeat these steps with the Tab 2 widget, setting the dynamic panel's state to State 2.
4. Preview the Interaction
Preview the page and click the tabs to view their associated content.
Additional Information and Tips
Show Which Tab Is Active
Select all the tab widgets and add them to a selection group.
Enable the :selected style effect on the tab widgets and select the style properties you want to change when a tab is active.
For each tab, add a Set Selected/Checked action to its Click or Tap event. Choose This Widget in the Target dropdown and click OK.