选项卡控件 | Tab Control

制作一个结构,在这个结构中点击一个标签就可以显示该标签下的内容。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:开始

在练习文件中打开“选项卡控件”页面。

该页面包含了两个选项卡元件,“Tab1”和“Tab2”,并且每个选项卡都具有“选中”交互样式(查看我们的交互式按钮教程,了解更多有关交互样式配置的内容)。

该页面还包含了两个组合,“Body1”和“Body2”,“Body1”包含的是“Tab1”的内容,“Body2”包含的是“Tab2”的内容。

STEP2:制作动态面板

右键点击“Body1”组合,选择“转换为动态面板”选项。

双击这个新的动态面板打开动态面板状态管理器。

点击绿色的“+”图标添加一个状态。

在新状态名称(State2)上双击打开进行编辑。

回到“选项卡控件”页面,右键点击“Body2”然后选择“剪切”。

再回到“State2”页签,将“Body2”粘贴在画布上,然后将其移动到(0,0)的位置。

STEP3:给“Tab1”添加交互

回到“选项卡控件”页面,选择“Tab1”,然后双击“检视”窗口中“属性”页签下的“鼠标单击时”来添加一个新的鼠标单击时事件。

在用例编辑器左侧的“添加动作”栏中,点击“设置面板状态”。

在右侧的“配置动作”栏中,选择你创建的动态面板。

在这一栏的底部,使用“选择状态”的下拉列表选择“State1”(默认情况下就是这个选择)。

回到左侧的“添加动作”栏,点击“设置选中”。

在右侧的“配置动作”栏中,点击“当前元件”的复选框。

点击“确定”按钮关闭对话框。

STEP4:对“Tab2”重复以上步骤

对“Tab2”重复以上步骤,当你添加“设置面板状态”动作时,这一次要注意选择“State2”。

STEP5:设置选项组

当选择一个选项卡的时候另一个应该是取消选择,所以我们应该将这两个选项卡添加到一个选项组。在一个选项组中,一次只能选择组中的一个元件,当其中的一个元件被设为选中时,组中的其他元件会被自动取消选中。

同时选中“Tab1”和“Tab2”。

在“检视”窗口的“属性”页签下,找到“设置选项组名称”字段,输入“Tab组”来创建一个新的选项组,并且将元件添加到组中。

STEP6:预览

点击“预览”按钮。

尝试点击选项卡来切换它们,被点击的选项卡变成选中状态,并且动态面板也变为相应的状态。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。