我們平時注冊或者登錄時,輸入密碼的時候,通常都會有密碼的可見與不可見切換設置,看起來簡單又常見的交互效果,做起來卻沒有想象中那麼簡單,我們一起來看看怎麼做吧~
國際慣例,看了效果圖再說哈哈
起初,密碼可見,點擊不可見的眼睛按鈕,密碼轉為不可見(現實操作中,一般都是由密碼不可見切換到可見,方法都是一樣的,隻是創建面闆狀态時,把不可見放在首位就可以了。)
教程來襲
(1)創建一個動态面闆。
(2)創建動态面闆的2個狀态并進行編輯。
(3)創建密碼不可見狀态的基本元件:文本框以及密碼可見的眼睛按鈕,并對文本框進行設置。
(4)創建密碼可見狀态的基本元件:文本框以及密碼不可見按鈕,選擇文本框類型為text以及對文本框進行命名。
(5)對密碼可見按鈕進行交互設計,同時設置hide文本框中的文本内容與unhide文本框的相同:點擊密碼可見按鈕動态面闆轉到密碼可見狀态;hide文本内容=unhide文本内容。
(6)對密碼不可見按鈕進行交互設計,同時設置unhide文本框中的文本内容與hide文本框的相同:點擊密碼不可見按鈕動态面闆轉到密碼不可見狀态;unhide文本内容=hide文本内容。
(7)現在已經設置好了按鈕交互,兩文本框的内容也設置相同了,點擊預覽來測試吧,是不是做成功了?
希望你可以為你自己感到驕傲啦~~
本文由 @萍萍仔 原創發布于人人都是産品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!