הגדרת Theme ב-Material UI

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

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

תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.

מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

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

הגדרת Theme ב-Material UI

אם לא מתאימים לנו הצבעים והגדלים שברירת המחדל של Material UI מציעה, אפשר להגדיר ערכת נושא (Theme) משלנו ולהחיל אותה על הרכיבים, בלי לשנות את האנימציות שלהם.

בניית ה-Theme ושימוש בו

1. יצירת האובייקט: הפונקציה createMuiTheme מקבלת אובייקט עם הגדרות. כל נושא הוא אובייקט משלו: typography לגופנים ו-palette לצבעים.

2. טיפוגרפיה: מגדירים fontFamily (בהרצאה Helvetica, ולהמחשה גם Fantasy) ו-fontSize של 15.

3. הגדרה לפי סוג כותרת: אפשר לתת הגדרות רק ל-h3, למשל fontSize של 30, ורק כותרות h3 יושפעו.

4. פלטת צבעים: בתוך palette מגדירים primary ו-secondary, ובכל אחד main. הצבעים באים מספריית צבעים מובנית שלא צריך להתקין. בהרצאה: green ל-primary ו-orange ל-secondary.

5. חוזק הצבע: כל צבע הוא מערך של גוונים והמיקום במערך קובע את החוזק. עם 100 הצבעים בהירים מאוד, ועם 600 הם חזקים יותר.

6. החלה על הרכיבים: עוטפים את התוכן בתגית ThemeProvider של Material UI (לא זו של Styled Components) ומעבירים לה את אובייקט ה-Theme במאפיין theme.

שימו לב

- בהרצאה ה-Theme הוגדר ברכיב אחד רק כי רק הוא משתמש ב-Material UI.

- ערכת נושא היא עניין של כל האתר, ולכן נכון להגדיר אותה ברמת האפליקציה, למשל ב-Layout, ולא ברכיב בודד.

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

פרקי ההרצאה: הגדרת Theme ב-Material UI

תמלול ההרצאה: הגדרת Theme ב-Material UI

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

00:02
דבר נוסף ומאוד מעניין שאנחנו יכולים להוסיף כאן ל-Material UI, זה הגדרת תים משלנו על גבי הרכיבים שלהם. כלומר, יש להם את העיצובים שלהם, אני לא משנה להם את העיצוב. כשאני נכנס אני רואה את האנימציה הזאת והיא ממש חוזרת כשאני יוצא, זה דברים ממש מגניבים ואסתטיים ואני רוצה אותם.
00:26
אבל יכול להיות שוואלה, לא בא לי שה-primary buttons או ה-primary color יהיה כחול וה-secondary יהיה אדום. אלה הצבעים שהם ישר מציעים לנו. ואולי אני לא רוצה את הגדלים הדיפולטיים האלה. כלומר, יש כל מיני דברים ששמים לי אותם כדיפולט, ויכול להיות שאני רוצה להגדיר איזושהי ערכת נושא או Team שהוא מותאם לאפליקציה שלי.
00:52
בכל האפליקציה שלי אני רוצה קצת צבעים אחרים, גדלים אחרים וכדומה. בואו נראה איך אנחנו עושים את זה. אז מה שאנחנו רוצים לבצע זה לבנות Team ואז להשתמש בו.
01:07
קודם כל הערה, אני כרגע משתמש ב-Material UI רק ברכיב Contact Us. אם הייתי רוצה לבצע Team עבור כל האפליקציה, מן הסתם לא הייתי בונה אותו ברכיב אחד, הייתי בונה אותו ברמת האפליקציה, לדוגמה אולי בקובץ נפרד שקשור ל-Layout ואז מיישם את ה-Team ברמת ה-Layout.
01:29
נניח הייתי בונה אותו כאן ושם אותו על הלאוט עצמו או בקובץ נפרד ושם אותו. אבל כרגע אין לי צורך כי אני רוצה שרק הרכיב הזה יכיל את כל מה שהגדרנו במטריאל UI אז אני בונה את תים פה.
01:44
אז אני בונה קונסט תים ויש לנו פונקציה שנקראת קריאט מ-UI זה קיצור של מטריאל UI תים. הפונקציה הזאת מקבלת אובייקט. האובייקט הזה מקבל הגדרות ספציפיות של ה-team של Material UI.
02:06
לדוגמה, אם אני רוצה להגדיר הגדרות שקשורות לטייפוגרפי, אז יש לי את האובייקט טייפוגרפי. אם אני רוצה הגדרות שקשורות לפלטת הצבעים, אז יש לי פה הגדרות של פלט, פלטת הצבעים של Material UI. בואו נתחיל עם טייפוגרפי.
02:26
כל דבר כזה זה אובייקט שמכיל את כל ההגדרות שקשורות לאותו נושא. לדוגמה בטייפוגרפי אנחנו רוצים לשנות את הפונט פמילי ולהגדיר פונט פמילי אחר יש לנו כאן סדרה של פונט או משפחות של גופנים שאנחנו יכולים להגדיר ואנחנו יכולים גם גופנים אחרים משלנו לדוגמה בואו ניקח את הלווטיקה איזשהו סוג של גופן שקיים ובוא נניח שעבור כל מה שקשור
02:59
לטייפוגרפיה אני רוצה פונט סייז חמש עשרה אורייט איך אני בדיוק משתמש עם כל הדברים האלה אז אנחנו רוצים לקחת את האובייקטים ולגלם אותו ב-UI שלנו אם הייתי רוצה לגלם אותו ברמת ה-UI אז הייתי הולך ל-Layout ומגדיר אותו פה יש תגית מיוחדת שכבר אנחנו נשתמש איתה והייתי שם אותה ברמת ה-Layout הכללי הייתי
03:34
עוטף את כל הדיב הזאת בתגית ואז ה-team היה מתייחס לכל האפליקציה. אנחנו רוצים לעשות את זה כרגע כאן, ברמת הרכיב, וזה יהיה תגית שנקראת TeamProvider.
03:51
שימו לב שיש לנו שתי תגיות כאלה, אחת מגיעה מ-Styled Component, אני לא רוצה אותה. אחת מגיעה מ-Material UI, אני כן רוצה אותה. בואו נראה רק שהוא שם לנו את זה מ-Material UI.
04:05
הנה זה פה. מעולה. אז בואו ניקח את התגית, יש לנו התחלה, יש לנו סוף. כתוב את הדיב בתגית הזאת ויש לה מאפיין שנקרא Team ואנחנו רוצים לתת לה מאפיין את האובייקט Team שבנינו.
04:27
בואו ניתן לזה לשקוע, תבין רגע שזה מה שאנחנו אמרנו לך, חזור לאתר, נפרש אותו וכנראה שזה תפס. בואו ננסה רגע לשנות ל-Fantasy אולי.
04:51
אנחנו רואים שהוא שעתים ניתן ושימו לב שהוא ניתן לכולם לא רק למישהו ספציפי כי זה מה שהגדרנו אולי אנחנו רוצים לגשת ולהגיד אוקיי כל מישהו h3 אנחנו רוצים לתת לך הגדרות דומות לדוגמה בוא ניתן font size 30 אם זה גרם לאיזשהו change כן הקטנו את זה זה נראה קצת יותר אולי אלגנטי אבל רק h3
05:29
שלושים יקבלו את העיצוב הזה מכל הטייפוגרפי. Good. אולי נחזיר אותו בחזרה להלווטיקה, שלא יהיה לנו כמו המערב הפרוע, או נראה קצת יותר אסתטי.
05:46
Good. מה בקשר לפלטת הצבעים? בואו נגדיר פאלט, ונגדיר בתוך הפאלט פריימרי, איך אנחנו רוצים שהצבעים של הפריימרי יהיו ואיך אנחנו רוצים את הצבעים של הסקנדרי.
06:04
כאן יש לנו גם כן כל מיני הגדרות ברמת הפריימרי. אנחנו רוצים להגדיר מיין, אז זה בעצם איך הוא נראה בכללי.