DRAFTBIT | 비밀번호 표시/숨기기 제작 실습, Show/Hide Password (Eye Checkbox)

디자인 제작

이미지와 같이 디자인을 만든다.

view > text, checkbox 

• passwordInput_hide 는 비밀번호가 •••••••••로 보이는 것으로 눈 감은 아이콘과 짝꿍
• passwordInput_show 는 비밀번호가 전부 보이는 것으로 눈 뜬 아이콘과 짝꿍
• Checkbox는 눈  아이콘(변수 checkboxValue 자동생성됨)

 

 

 

 

각 값 적용내용

passwordInput_hide 

• Configs 에서 Password Input? 토글을 활성화시킴. -> •••••••• 로 표시되도록
• Data 탭의 하단에 Conditional Display 부분 Value값 checkboxValue, Operator값 Doesn't exist(is Falsy)를 선택해줌. ->

 

 

 

 

passwordInput_show 

• Data 탭의 하단에 Conditional Display 부분 Value값 checkboxValue, Operator값 Exist(is Truthy)를 선택해줌.

• Checkbox의 변수값 screen 변수 'checkboxValue'가 자동 생성되어 있음.
• Data 탭의 Checked Icon을 눈 뜬 것, Unchecked Icon을 눈 감은 것으로 설정.
• Styles 탭의 Positon을 Absolute로 고정시켜 줌.

 

 

참고

https://community.draftbit.com/c/tips-tricks/show-hide-password-field-eye-checkbox

 

 

기타 의견

솔직히 왜 이렇게 되는지 논리는 잘 이해 못 했다는 것이 안타깝다.

그래도 기능은 하니까 다행인 건가.

 

천 리 길도 한 걸음부터