מבוא מהיר לעיצוב חומרים באמצעות חומר

מה זה עיצוב חומרים?

עיצוב חומרים היא שפת עיצוב שיצרה גוגל. על פי material.io, עיצוב חומר מטרתו לשלב בין:

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

מדוע להשתמש בעיצוב חומרים?

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

איך אתה יכול להשתמש בעיצוב חומרים באפליקציות האינטרנט שלך?

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

הנה רשימה של תכונות שמציע חומר:

  • רֶשֶׁת
  • שולחנות
  • תגים, כפתורים, פירורי לחם
  • קלפים, צ'יפס, אוספים
  • כותרת תחתונה, טפסים
  • Navbar
  • והרבה יותר!

איך להתחיל

שלא כמו Bootstrap, Materialize אינו דורש popper.js. זה דורש רק jQuery. זה כל מה שאתה צריך כדי להתחיל. הוסף את זה ל- HTML שלך ותהיה טוב להתחיל!

צבעים

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

Lorem Ipsum

בנוסף, ניתן גם להבהיר או להחשיך צבע על ידי מתן שם כיתתי אחר lighten-1או darken-1. לדוגמה,

Sample Text

. ניתן להחליף את 1 במספרים עד 5 להבהיר ועד 4 לכהות. מספרים גבוהים יותר יחולו על גוונים בהירים יותר או כהים יותר של הצבע.

כפתורים

כדי להתממש כפתור, פשוט תן לו את שם הכיתה btn. אתה יכול גם להוסיף לו אנימציה מגניבה על ידי מתן שיעור נוסף waves-effect. אם אתה זקוק לכפתור גדול יותר, btn-largeניתן להשתמש בכיתה. לדוגמה:

 Click    Click    Click  

צֵל

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

כדי להחיל אפקט צל על אלמנט, z-depth-2ניתן להשתמש במחלקה (ניתן להחליף 2 במספרים 1-5). לדוגמה:

סיכום

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