本课程学习如何使用选择组、动态面板和“设置面板状态为指定状态”动作，制作选项卡交互按钮。特别感谢Stuart Jones在制作方法上的创新。

选项卡按钮

步骤1：设置矩形部件制作的Tab标签样式

下载的RP文档中包含一个完成版产品文档，文档第2个页面中，有不同样式的范例。在这个课程中，会采用草图效果范例。
首先，在线框图中添加矩形部件，右键点击矩形部件，快键菜单选择“编辑按钮形状->选择形状->顶部圆角矩形”。
点击工具栏的填充颜色按钮，设置默认填充色。设置透明度为100%。

步骤2：编辑选项卡标签的选中样式

选项卡标签的默认和选中样式是不同的，右键，快捷菜单选择“编辑按钮形状->编辑选中样式”。勾选填充颜色复选框，点击填充颜色的下拉按钮打开样式画笔。
在这个例子中，设置填充类型为线型渐变，填充颜色选择蓝色，渐变角度设为270。

步骤3：复制、粘贴，添加选择组，命名

复制、粘贴两个矩形，现在一共有3个相同的标签，交3个标签排成一行。
设置在同一时间，只有其中一个标签可以选择，全选3个标签，右键，快捷菜单选择“编辑按钮形状->指定选择组”。命名选择组为“abGroup1”，点击确定。
依次点击标签，在部件属性窗口将3个标签依次命名为： Tab1,Tab2,Tab3。在3个标签上分别编辑相应的文本：Tab1,Tab2,Tab3。

步骤4：添加动态面板及3个面板状态

在线框图中拖入另一个矩形部件，将其放在标签的下面。然后，右键点击新添加的矩形，快捷菜单选择“转换->转换为动态面板”。
移动位置使标签的底部与动态面板的顶部相连，右键点击动态面板，快捷键选择“顺序->置于底层”，下一步，选中动态面板，键盘向上键向上移到1个像素。
在动态面板管理窗口，命名面板为TabDynamicPanel1。添加两个新的状态，共创建3个面板状态。通常，面板状态默认名称为：State1, State2, State3。

步骤5：在每个状态中添加矩形

打开状态1，选中矩形，复制矩形。
在状态2和状态3，粘贴矩形在同样的位置。每个面板状态的填充颜色要与标签中使用的被选中按钮样式颜色匹配，如果使用了白色以外的其它颜色，确保与现在的颜色匹配。
在每个状态的矩形中分别编辑相应文本为： Pane 1,Pane 2,Pane 3

步骤6：添加OnClick事件

选择标签1，编辑它的Onclick事件。首先，添加“设置部件为选择状态”动作。设置设置部件为Tab1(按钮形状)。保持选择值下拉选单的默认选项“己选择”。
下一步，添加“设置面板状态到指定状态”动作。配置动态面板TabDynamicPanel1选中，设置选择状态下拉选单项为状态1。
第2和第3个标签重复上述步骤，注意确认Tab2和State2是第二个标签，Tab3和State3是第三个标签。

步骤7：设置页面载入的初始标签

当页面载入时，设置第1个标签为默认选中。
页面属性窗口，添加页面加载时OnPageLoad事件用例，选择“设置部件为选择状态”，勾选Tab1复选框。保持选择值下拉选单的默认选项“己选择”，点击确定。

步骤8：生成原型

生成原型，查看标签交互效果。