יצירת Styled Components דינמי

תמלול ההרצאה: יצירת Styled Components דינמי

הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Styled Components דינמי» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:17

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

3. 00:45

   radius ונכניס לתוכו math floor math random ובואו נניח שנגדיר לו כפול 20 פלוס 5 לא יהיה בין 0 ל-20 אלא בין 5 ל-25 ועכשיו כל מה שאנחנו רוצים לעשות זה לשרשר אותו בדיוק כאן לא במקום ה-px במקום ה-10 אז נמחק את ה-10 ונגדיר לכאן את ה-interpolation עם רדיוס עכשיו מה שה-styled component עושה הוא בעצם יכול להגיע למידע הזה ולהשתמש בו למרות

4. 01:26

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

5. 01:54

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

6. 02:11

   זאת אומרת הרי בסופו של דבר המטרה שהקומפונט הזה באמת יהיה בטן. אם זה בטן אני יכול להגדיר לו פה כל מיני אטריביוטס. בואו נשכפל את הבטן הזה ובוא נניח שהראשון היה call help desk והשני יהיה call tech support.

7. 02:34

   שני לחצנים שונים אבל כרגע ה-tech support הוא disabled. זאת אומרת אם הייתי שם לחצן רגיל וקובע שהוא Disabled אז המראה שלו היה נראה קצת אחר. בואו רגע נשים Button ראשון טסט ו-Button שני Disabled.

8. 02:59

   נסתכל רגע על שני הלחצנים הרגילים ונראה שה-Disabled לא ניתן ללחיצה אבל יש לו עיצוב שונה. זה אני יכול ללחוץ עליו, זה אני לא יכול ללחוץ עליו אבל העיצוב שלהם קצת שונה.

9. 03:12

   כאן אני לא רואה עיצוב שונה בין שני הלחצנים למרות שהגדרתי את זה גם כ-disabled. על הראשון אני לוחץ, אני רואה את האלרט, השני, אני לוחץ, לא קורה כלום, אבל אני רוצה שהעיצוב שלו יושפע מזה, כמו כאן.

10. 03:29

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

11. 03:44

    זה באמת מתבצע על ידי ה-interpolation שדיברנו עליו, וזו הסיבה לקיום של הדבר הזה. אז בואו נניח שאנחנו לא רוצים שה-Color של הטקסט תמיד יהיה White.

12. 04:00

    אם הוא Disabled אנחנו רוצים שהוא יהיה Gray, אם הוא Enabled שהוא יהיה White. אז אנחנו קובעים Color ובמקום להגדיר White, נמחק כרגע את ה-White ונשים פה Interpolation.

13. 04:16

    בתוך ה-Interpolation אנחנו יכולים לבנות פונקציה, מה שבעצם ה-Styled Component עושה, אם הוא מקבל פונקציה הוא פשוט קורא לה ונותן לה את אוסף כל האטריביוטס שקיימים.

14. 04:35

    אני אקרא לזה ATTRs בקיצור של אטריביוטס וזה מה שנשלח לפונקציה שלנו ואנחנו רוצים עכשיו לחקור ולראות מה ערכי האטריביוטס. האם ב-ATTRs קיים האם קיים לי אטריביוט כזה?

15. 04:56

    אם כן, תחזיר לי gray. אם לא, תחזיר לי white. זאת אומרת, אם אתה disabled, תחזיר לי gray, אם לא, תתן לי את ה-white הרגיל. בואו רגע נבדוק את זה ונראה כבר שה-disabled קיבל אפור.

16. 05:16

    Enabled עובד, Disabled לא עובד, אבל הוא אפור. עדיין אני יכול לרחף עליו ולראות שהוא משנה