ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

Input Password עם עין להצגת הסיסמה ב-React - מדריך מקיף עם טיפים ומידע שימושי

Input Password עם עין להצגת הסיסמה ב-React

  1. בית
  2. >
  3. Full Stack
12 ביולי 2023• זמן קריאה: 1 דקות

קומפוננטה קלילה ב-React ליצירת שדה סיסמה עם אפשרות לראות את הטקסט ע"י לחיצה על אייקון עין. פשוט, שימושי ונוח במיוחד למובייל.

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

תמונה מתוך המאמר
linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

בחשיבות הגיבוי ובגנות ארעיות החיים — מדריך עם חיוך
27 באפריל 2025
Full Stack>>REACT

בחשיבות הגיבוי ובגנות ארעיות החיים — מדריך עם חיוך

גיבוי זה לא המלצה — זו הצלה מעצבים, מנוטלה ומגלידות עצב! פוסט מצחיק ומפוכח על למה כדאי לדאוג לגיבוי בענן או בדיסק חיצוני, ואיך עבודה נכונה עם Git יכולה לחסוך לכם הרבה כאבי לב דיגיטליים.

 קומפוננטת Copy to Clipboard לעצלים שמכבדים את עצמם
26 באפריל 2025
Full Stack>>REACT

קומפוננטת Copy to Clipboard לעצלים שמכבדים את עצמם

קומפוננטת Copy ל-Clipboard שמעתיקה ערך ונותנת פידבק חכם עם אייקון משתנה — פשוטה, מהירה ומותאמת לפרונטנדים שרוצים להרים UX טוב בלי כאב ראש.

הוק פשוט לשמירת נתונים ב-localStorage ב-React
9 באוקטובר 2024
Full Stack>>REACT

הוק פשוט לשמירת נתונים ב-localStorage ב-React

בפוסט הזה נלמד איך ליצור הוק פשוט ב-React לשמירת נתונים ב-localStorage. גלו איך להשתמש בהוק לשמירה ושאיבה של נתונים, עם גרסה בסיסית שמכסה את הצרכים הבסיסיים של רוב הפרויקטים.