美文网首页
Axure RP中添加Tab切换效果

Axure RP中添加Tab切换效果

作者: 西西女神 | 来源:发表于2021-07-12 10:01 被阅读0次

    期望效果如下所示

    目标效果

    ①添加三个文本框,并设置下边框的显示效果

    添加标题并设置下边框
    【样式】页中,设置Border如红框所示→设置只显示下边框

    ②思考一下,我们对文本框效果的要求应该是鼠标移动上去的时候,字变成蓝色,单击之后,下边框变粗,并且文字变成蓝色。

    于是,我们需要添加鼠标MoveOver和Selected的效果


    鼠标MoveOver的效果
    鼠标单击的效果

    接下来,3个Tab是需要连动的,并且,默认选择是推荐

    画重点,要将所有的tab页进行连动,必需设置选项组名称为一样

    对推荐页进行设置

    将推荐页效果复制给其它2个Tab,并设置选项组名称和选中状态


    操作GIF

    ④添加交互页面

    设置动态面板方式:


    对目标单击鼠标右键→【Create Dynamic Panel】

    添加文本框和文字,并且设置动态面板,效果如下图所示


    ⑤对各Tab设置单击切换选中效果和动态面板状态的动作

    推荐Tab的鼠标单击效果
    榜单Tab的鼠标单击效果
    分类Tab的鼠标单击效果

    由此,完成了Tab切换效果,如开文所示。

    相关文章

      网友评论

          本文标题:Axure RP中添加Tab切换效果

          本文链接:https://www.haomeiwen.com/subject/fjefpltx.html