Axure设置Tab切换

一、制作Tab页面

1、 拖入一个矩形

去掉3个边，只留下下单边，如果你用的我的《快速原型组件库》，可以直接拖入“下单边矩形”，设置一下尺寸为100×40(尺寸这种东西，可以按自己需求来，下同)，起个名字Tab1（给原件起名字这个习惯一定要养成，方便自己，也方便别人）

 

2、 交互样式设置

设置了鼠标悬停样式及选定样式，此处可根据你的需求自行调整样式

 

3、设置选项组名称

选项组的功能，一般用在表单的单选框上，相同的选项组，可以联动单选，此处，我们可以将普通元件编组，同样让其具有单选框的效果

 

4、添加基本交互动作

【动作】

“鼠标点击时”

设置“选中状态”，当前元件（This），设置选中状态为“值”、true

 

5、复制多个Tab标签

复制多个Tab标签，一字排开，分别改下名称，便于识别，Tab1、Tab2、Tab3；把Tab1的选中勾上 ，Tab2和Tab3的选中都去掉。

做完这一步，就可以看到初步的效果了

 

二、制作Tab页面

1、 拖入一个矩形

设置一下尺寸300x191（根据你的需求来可以），简单调下演示，输入文字，便于效果区别

 

2、 将矩形转换为动态面板

给动态面板起个名字，便于识别Tab-box

 

3、 复制动态面板状态

通过复制状态，一共三个状态State1 – State3

4、 编辑状态内容

简单编辑下各状态内容，演示的时候，效果更好