Axure 教程:使用動(dòng)態(tài)面板實(shí)現(xiàn)密碼可見性切換
本文教大家如何使用動(dòng)態(tài)面板實(shí)現(xiàn)密碼可見性切換,一起來看看~
使用到的元件
一個(gè)文本框:
一個(gè)睜眼Icon:
一個(gè)閉眼Icon:
PS:許多需要用到的Icon都可以在阿里巴巴矢量圖標(biāo)庫里面搜索到然后進(jìn)行下載(全部免費(fèi))或者直接復(fù)制svg然后粘貼到Axure里面即可。
操作步驟
(1)將文本框轉(zhuǎn)換為動(dòng)態(tài)面板
(2)設(shè)置兩個(gè)面板,一個(gè)面板命名為“不可見”,另一個(gè)命名為“可見”
(3)編輯“不可見”面板,設(shè)置文本框類型為“密碼”
(4)編輯“可見”面板,拉入一個(gè)文本框,類型為“Text”
(5)設(shè)置“睜眼”Icon的兩個(gè)交互動(dòng)作
1)第一個(gè)交互動(dòng)作,切換面板狀態(tài)
2)第二個(gè)交互動(dòng)作,將文本框“不可見”的文字賦予“可見”文本框
(6)確定之后就可以“預(yù)覽”看效果了
1)點(diǎn)擊睜眼前,輸入“123123”
2)點(diǎn)擊睜眼后
(7)同理我們設(shè)置一下“閉眼”的交互動(dòng)作
(8)再看看效果
1)閉眼前,再輸入“123”
2)點(diǎn)擊閉眼后
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash ,基于 CC0 協(xié)議
評論
大佬,你的界面框跟我的相差很不一樣 ?