制作一个结构,在这个结构中点击一个标签就可以显示该标签下的内容。
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:预览
点击“预览”按钮。
尝试点击选项卡来切换它们,被点击的选项卡变成选中状态,并且动态面板也变为相应的状态。