Axure设置Tab切换

    技术2022-07-16  80

    一、制作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、 编辑状态内容

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

     

    Processed: 0.016, SQL: 9