התקנת Material UI

תמלול ההרצאה: התקנת Material UI

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

1. 00:02

   אז הדבר הראשון שאנחנו רוצים לעשות זה פשוט להתקין אותה. בואו נתקין את הספרייה. npm i strudel material ui/core זה בעצם הליבה של הספרייה, ככה היא נקראת.

2. 00:19

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

3. 00:34

   אז בואו ניקח את ה-contact-as הזה ונבנה פה טופס עבור contact-as שיהיה בנוי עם רכיבים מהספרייה הזאת. אנחנו רוצים להוסיף רכיב create-fc לתוך contact-as area, קומפוננט שנקרא contact-as בצורה כזאת.

4. 00:59

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

5. 01:32

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

6. 02:07

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

7. 02:31

   אין לנו פה שום קשר כרגע ל-Material UI. בואו רגע נסתכל על זה. אז ניגש ל-Layout בגלל שהדבר הזה הוא כאילו דף נפרד וב-Layout ניפטר מה-Home ומה-Support ונשים פה את Contact Us בצורה כזאת, הוא הגיע לי מפה למעלה.

8. 02:59

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

9. 03:20

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

10. 03:46

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

11. 04:03

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

12. 04:24

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

13. 04:49

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

14. 05:05

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

15. 05:21

    שזה בסדר אבל ככה זה נראה בוא אולי נגדיר כאן איפה זה היה פה בקונטקט אס ב css נגדיר קצת מרג'ין 20 פדינג גם 20 אולי הוא טיפה ירווח לי את הבוקס או טיפה רווח לי את הבוקס בצורה כזאת זה בסדר אז טייפוגרפי נועד עבור מידע טקסטואלי בלבד אנחנו נראה עוד מעט מה בעצם יהיה ה-added value שלו.

16. 05:59

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

17. 06:13

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

18. 06:32

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

19. 06:49

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

20. 07:04

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

21. 07:18

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

22. 07:37

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

23. 08:24

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

24. 08:46

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

25. 09:18

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

26. 09:42

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