如何用Axsure做Tab选项卡

1. [endif]打开Axsure



2.将元件库中的矩形拖入到面板中



3.将元件库中的按钮拖入到矩形框内,同时双击拖入的按钮元件,输入按钮名称,为了方便后续操作,在右侧栏箭头所指位置输入按钮名称


4.将按钮复制两个,粘贴在适当位置,分别更改名称,如下图所示



5.找到元件库中的动态面板,将它拖入工作区,如下图所示



6.将鼠标移动到右侧栏动态面板上,这时可以看到动态面板后边出现一个加号,每点击一次,就会添加一个state,这里我们需要添加三个state




7. 双击state1,将需要的图片粘贴到虚线框内,调整图片大小,不要让图片超出虚线部分(超出部分不能显示),如图所示,同样的方法将图片添加到state2 state3中


8. 回到index中,效果如图



9. 同时选中三个按钮,在属性列单击选中设置选中交互样式



10.这里我们设置选中状态时,按钮填充为灰色


.

11. 再选中btn1,在属性中添加单击事件,在左侧添加动作中点击选中,设置当前选中按钮为true,其他为false.如下图所示



12. 同时在添加动作中找到设置面板状态并点击,设置动态面板为state1,点击确定



13.选中btn2,设置选中状态为true,其他按钮选中状态为false,同时设置面板状态为state2,同理,btn3也像这样设置。最后点击页面右上角的预览,就可以看到完成后的tab选项卡啦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 小楼老师的教程汇总,一篇搞定! (一) Axure rp的界面 1-主菜单工具栏:大部分类似office软件,不做...
    纪同学说阅读 5,552评论 1 33
  • 本文通过还原简书App原型的过程,进行了大量的交互设计。在原型制作过程中,几乎实现了最常见的交互效果,主要包括:轮...
    银海系阅读 859评论 0 2
  • 本文通过还原简书App原型的过程,进行了大量的交互设计。在原型制作过程中,几乎实现了最常见的交互效果,主要包括:轮...
    Axure原型设计阅读 2,942评论 1 40
  • 软件测试是软件工程中的一个重要部分,它贯穿于整个软件开发生命周期,是软件质量保证的关键手段。随着软件产业高速发展,...
    然学科技阅读 746评论 0 7
  • 五月的风雨一次次肆虐,在初夏的怀里撒着欢,撅嘴喊着太阳,阳光热情似火的傲娇,尽情释放热量,爱抚每一个生命。 她似乎...
    浅浅是水阅读 1,847评论 42 62