1. מבוא
Material Components (MDC) עוזר למפתחים להטמיע Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית המשתמש ב-Google, שכולל עשרות רכיבים יפים ופונקציונליים של ממשק המשתמש. זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
Material Elements לאינטרנט (MDC Web) הם ללא תלות במסגרות, והם נבנים באמצעות JavaScript רגיל. הכלים האלה מאפשרים ל-MDC Web לעבוד בצורה חלקה בתהליך הפיתוח. אפשר להתקין את הרכיבים האלה לפי הצורך כדי לשפר את העיצוב הגמיש באפליקציה הקיימת.
מה תפַתחו
ב-Codelab הזה מחליפים חלק מהרכיבים הקיימים בצורה ברכיבים שסופקו על ידי MDC Web:
רכיבי MDC ב-Codelab הזה
- לחצן
- בחירה
- שדה טקסט
מה צריך להכין
- גרסה עדכנית של Node.js (שנשלחת בחבילה עם npm, מנהל חבילות של JavaScript).
- הקוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, ב-CSS וב-JavaScript
איזה דירוג מגיע לדעתך לרמת הניסיון שלך בפיתוח אתרים?
2. הגדרת סביבת הפיתוח
להורדת האפליקציה לתחילת פעולה של Codelab
האפליקציה לתחילת הפעולה נמצאת בספרייה material-components-web-codelabs-master/mdc-111/starter. חשוב לשמור את cd בספרייה הזו לפני שמתחילים.
...או לשכפל אותו מ-GitHub
כדי לשכפל את ה-Codelab הזה מ-GitHub, מריצים את הפקודות הבאות:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
תלות של פרויקטים בהתקנות
מספריית ההתחלה (material-components-web-codelabs/mdc-111/starter), מריצים את:
npm install
יש פעילות רבה ובסופה, ההתקנה אמורה להופיע בטרמינל:
הפעלת אפליקציה לתחילת פעולה
בספרייה לתחילת הפעולה, מריצים את:
npm start
webpack-dev-server יתחיל. מכוונים את הדפדפן אל http://localhost:8080/ כדי לראות את הדף.
הצלחת! אתם אמורים לראות את טופס הכתובת למשלוח של האפליקציה:
3. עדכון הלחצן
לחצן להתקנת MDC
כדי להפסיק את שרת הפיתוח, מקישים על Ctrl+C. לאחר מכן, מתקינים את חבילת ה-NPM של לחצן ה-MDC ומפעילים מחדש את השרת:
npm install @material/button npm start
ייבוא של שירות ה-CSS
בחלק העליון של _theme.scss, מוחקים את הבלוק .crane-button { ... } ומוסיפים את הקוד הבא במקומו:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
עדכון תגי העיצוב
בקובץ index.html, מסירים את המחלקה crane-button מהרכיב <button>, מוסיפים את המחלקות mdc-button ו-mdc-button--raised ומציבים את התווית בתוך רכיב <span> עם המחלקה mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
הוספת גל
אפשר להשתמש בלחצני MDC בלי JavaScript. עם זאת, הוספת גל אינטראקטיבי ללחצן יוצרת חוויית משתמש עשירה יותר.
כדי להפסיק את שרת הפיתוח, מקישים על Ctrl+C. לאחר מכן מריצים את הפקודה:
npm install @material/ripple npm start
מוסיפים את הצהרת הייבוא הבאה לחלק העליון של app.js:
import {MDCRipple} from '@material/ripple';
כדי ליצור את ההד על הלחצן, צריך להוסיף את הפרטים הבאים בחלק התחתון של app.js:
new MDCRipple(document.querySelector('.mdc-button'));
ייבוא של הגופן Roboto
כברירת מחדל, Material Design משתמש ב-Roboto לגופנים של רכיבים.
ב-index.html, ייבא את הגופן Roboto Web על ידי הוספת הקוד הבא לרכיב <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
טוענים מחדש את הדף. אתם אמורים לראות משהו כזה:
הלחצן מציג עכשיו אפקט של גלים עדינים כמשוב חזותי לאחר לחיצה.
4. עדכון הרכיב שנבחר
רכיב ה-MDC Select כולל רכיב HTML מקורי <select>. יש להשתמש בו בכל מקום שבו בדרך כלל משתמשים ב-<select>. בואו נעדכן את השדה "מצב".
התקנת מודול MDC Node
כדי להפסיק את שרת הפיתוח, מקישים על Ctrl+C. לאחר מכן מריצים את הפקודה:
npm install @material/select npm start
ייבוא של שירות ה-CSS
יש להוסיף את הפריטים הבאים אל _theme.scss, מיד לאחר ייבוא הלחצנים:
@import "@material/select/mdc-select";
עדכון תגי העיצוב
מאתרים את הרכיב <select> ב-index.html. מחליפים את המחלקה crane-input במחלקה mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
מעל התג <select>, מוסיפים את תגי העיצוב הבאים לחץ לתפריט הנפתח של הרכיב MDC Select:
<i class="mdc-select__dropdown-icon"></i>
מתחת לתג </select> הסוגר, מחליפים את המחלקה crane-label ב-mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
לאחר מכן מוסיפים את תגי העיצוב הבאים מיד אחרי התווית:
<div class="mdc-line-ripple"></div>
לסיום, מוסיפים את התגים הבאים מסביב לרכיב <select> (אבל בתוך הרכיב crane-field):
<div class="mdc-select">
...
</div>
תגי העיצוב שיתקבלו אמורים להיראות כך:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
ייבוא ה-JS
מוסיפים את הצהרת הייבוא הבאה לחלק העליון של app.js:
import {MDCSelect} from '@material/select';
כדי ליצור את הבחירה, צריך להוסיף את הפרטים הבאים בחלק התחתון של app.js:
new MDCSelect(document.querySelector('.mdc-select'));
טוענים מחדש את הדף, שנראה כך:
הרכיב MDC Select מציג רשימה של אפשרויות למשתמש בפורמט מוכר, אבל בסגנון מודרני.
5. עדכון שדות הטקסט
לשדות טקסט של עיצוב חדש (Material Design) יש יתרונות משמעותיים יותר בנוחות השימוש לעומת רכיבי <input> פשוטים. הם מיועדים לזיהוי קל של תוכן מורכב, והם מציגים משוב חזותי עדין כשהמשתמש מקיים איתם אינטראקציה.
התקנת מודול MDC Node
כדי להפסיק את שרת הפיתוח, לוחצים על Ctrl+C. לאחר מכן מריצים את הפקודה:
npm install @material/textfield npm start
הוספה של שירות ה-CSS
יש להוסיף את הפריטים הבאים אל _theme.scss, מיד לאחר בחירת הייבוא:
@import "@material/textfield/mdc-text-field";
עדכון תגי העיצוב
באפליקציית index.html, מאתרים את הרכיב <input> בשדה 'שם'. מחליפים את המחלקה crane-input במחלקה mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
לאחר מכן, מחליפים את המחלקה crane-label במחלקה mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
לאחר מכן מוסיפים את תגי העיצוב הבאים מיד אחרי התווית:
<div class="mdc-line-ripple"></div>
בסוף, כוללים את כל 3 הרכיבים הבאים:
<div class="mdc-text-field">
...
</div>
תגי העיצוב שיתקבלו אמורים להיראות כך:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
חוזרים על אותו תהליך בכל שאר רכיבי <input> בדף.
תגי העיצוב בשדות כתובת, עיר ומיקוד אמורים להיראות כך:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
עכשיו אפשר להסיר את הסגנונות .crane-label ו.crane-input מ-_theme.scss, שלא נמצאים יותר בשימוש.
ייבוא ה-JS
מוסיפים את הצהרת הייבוא הבאה לחלק העליון של app.js:
import {MDCTextField} from '@material/textfield';
כדי ליצור מופע של שדות טקסט, צריך להוסיף את הפרטים הבאים בחלק התחתון של app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
טוענים מחדש את הדף, שנראה כך:
כל שדות הטקסט עודכנו ועכשיו הן מבוססות על עיצוב חדשני מהותי.
6. Recap
החלפת כמה רכיבים נפוצים (שדות טקסט, בחירה ולחצן) בלי לשנות את העיצוב של האפליקציה מחדש. מעולה!
רכיבים נוספים שעשויים להשפיע מאוד הם סרגל האפליקציות העליון וחלונית ההזזה לניווט.
השלבים הבאים
אפשר לעיין בעוד רכיבים נוספים ב-MDC באינטרנט בקטלוג האינטרנט של MDC.
אם אתם רוצים להשתמש ב-MDC Web עם מסגרת מסוימת, תוכלו לעבור אל MDC-112: שילוב של MDC עם Web Frameworks.