快好知 kuaihz订阅观点

 

Axure 教程:使用动态面板实现密码可见性切换

本文教大家如何使用动态面板实现密码可见性切换,一起来看看~

使用到的元件

一个文本框:

一个睁眼Icon:

一个闭眼Icon:

PS:许多需要用到的Icon都可以在阿里巴巴矢量图标库里面搜索到然后进行下载(全部免费)或者直接复制svg然后粘贴到Axure里面即可。

操作步骤

(1)将文本框转换为动态面板

(2)设置两个面板,一个面板命名为“不可见”,另一个命名为“可见

(3)编辑“不可见面板,设置文本框类型为“密码”

(4)编辑“可见面板,拉入一个文本框,类型为“Text”

(5)设置“睁眼”Icon的两个交互动作

1)第一个交互动作,切换面板状态

2)第二个交互动作,将文本框“不可见”的文字赋予“可见”文本框

(6)确定之后就可以“预览”看效果了

1)点击睁眼前,输入“123123”

2)点击睁眼后

(7)同理我们设置一下“闭眼”的交互动作

(8)再看看效果

1)闭眼前,再输入“123”

2)点击闭眼后

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:面板  面板词条  切换  切换词条  可见  可见词条  密码  密码词条  实现  实现词条  
原型

 Axure教程 | 制作一个商品...

本期给大家带来的是点击购买按钮后,“商品飞入购物车的动效”。一、照例先上gif二、制作方式我们准备三个需要用到的元素,分别为右侧的购物车(包括鼠标移入的样式),...(展开)

原型

 详解APP端哔哩哔哩所有的导航类...

由于哔哩哔哩的用户性格从整体上说更偏向于活泼,所以B站在具体的细节上的设计也考虑到了用户的调性,并不是一沉不变的。单从导航这一种设计上看,就出现了多达8种设计方...(展开)