Session10-选项卡制作 | 剑雨Axure RP9系列【进阶】

Session10-选项卡制作

如果熟悉动态面板交互的话，选项卡的制作其实是非常简单的。

分析

点击两个不同的迎按钮时，出现不同的选项，这两个不同的选项可设定为动态面板两个不同的状态。
给两个不同的按钮添加鼠标单击时事件，设置动作为设置面板状态即可。

元件准备

两个按钮：将其填充为不同的颜色并设置底部边框为直角；
一个动态面板：将动态面板设置两个状态
如下图所示：

步骤

按钮设置

1. 从左侧库中拖入两个按钮至画布中，并排排列；
2. 将按钮1和按钮2的文本设置为Tab1, Tab2;
3. 分别将两按钮的填充色设置为蓝色和红色；
4. 设置边角形状为顶部圆角，底部直角；
   

动态面板设置

1. 拖入一个动态面板至画布中，并将其宽度设置为两个按钮的宽度之和（这样为了好看些，你也可以设置为其他宽度）
2. 添加第二个状态；
3. 往状态1和状态2中分别添加一个矩形；
4. 分别将矩形1和矩形2的颜色填充为蓝色和红色（对应按钮1和按钮2）
   至此，动态面板的设置完成。
   

设置Tab与选项的交互

1. 点击Tab1,设置鼠标单击时交互，选择设置面板状态，为state1;
2. 点击Tab2,设置鼠标单击时交互，选择设置面板状态，为state2.
   到此，交互设置完成。
   

其他

如果你的Tab选项在选中时颜色都是一样的话，你可以设置Tab的选中颜色样式，并将Tab的集合设置为选项组，可灵活使用选项组在一次只能有一个选中的功能。
对于每一个Tab，还应该设置鼠标单击时事件，元件目标为：当前元件，动作为设置选中。