原型设计:[2]如何实现TAB切换时按钮变换样式
1、今天的设计目标:当鼠标移动到TAB标签按钮时,按钮样式发生改变(红底白色加粗字体),当点击按钮切换显示内容后,按钮样式发生改变(黄底黑色加粗字体)最终显示如下:
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d9ede1fa77679959430501082b.jpg)
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/1f03436b04d14929141c31a063e5eceeacbc7e2b.jpg)
4、设置按钮点击后(被选中)的样式选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑选中样式,在弹出的对话框中设置第二种样式(黄底黑色加粗字体),如下图:
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/4759c1dae43b3b869bb547e4185653bbf920752b.jpg)
6、设置按钮点击后改变样式选中第一个按钮“作业批阅结果”,然后再右侧事件编辑栏中选中“onclick(点击时)用例1”进行编辑(注意:前面已经添加了一个事件,点击时显示对应的内容),在弹出的对话框中选择“设置部件为选中状态“,在右侧选择按钮”作业批阅结果“后确定,如下图
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/54a89daee8d7592a447be8cb9f31dfb6336c672b.jpg)
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/031231632385e03650054f5bb8e039723c035a2b.jpg)
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/baab2086304861436c4040828febf6a75e0f532b.jpg)
10、本节建议这个例子用到了一个部件的操作涉及到另一个部件的属性的相关功能,因此建议大家养成对部件命名的好习惯,不然在后面做复杂交互设计的时候,会很头疼,比如,在一堆没有名字的部件列表中你找不到目标了……
![原型设计:[2]如何实现TAB切换时按钮变换样式](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c32888c599f07f1d8a727334b2b.jpg)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:95
阅读量:37
阅读量:89
阅读量:74
阅读量:92