Input Password עם עין להצגת הסיסמה ב-React
קומפוננטה קלילה ב-React ליצירת שדה סיסמה עם אפשרות לראות את הטקסט ע"י לחיצה על אייקון עין. פשוט, שימושי ונוח במיוחד למובייל.
ובהמשך הסדרה "קוד קליל בריאקט". )שהיא בעצם ספין אוף לרומיאו ויוליה( נראה הפעם קוד אולטרה קליל . קומפוננטה של input מסוג password שבלחיצה על עין מצד ימין (לא עין אמיתית תעזוב את זהההההה 😣) מראה את הטקסט שהוקלד. מצורף פה למטה התמונה של הקוד ⬇ כל העיקרון הוא לשנות סטייט שמשנה בתורו את הtype מpassword לtext רגיל. 🐔 כדי לשים את העין במקום, וכדי שלא יראה הinput שלנו כמו פורטרט של פיקאסו. הוספנו div עוטף מיותר שהוא relative והinput מתרחב לכל אורכו. ואת האייקון מיקמנו בעזרת absolute יחסית לdiv הרילטיבי ככה שהוא מרחף לו בתוך הinput. * יש מלא מקום לשכלל את הקומפוננטה אבל זה הבסיס הקליל. 👺🍔 תעשו חיים, ואל תשכחו לאכול טוב - להיות עצבנים על קיבה ריקה הרבה פחות משתלם מעצבים על קיבה מלאה. 👑 שימו לב שהקוד נכתב בtailwind מטעמי עצלות טהורה אז מתנצל מראש על המראות הקשים אין המערכת אחראית לחרדות או חוסר אוריינטציה שנגרם
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם