MDC-111 Web: שילוב רכיבי Material ב-codebase (אינטרנט)

1. מבוא

רכיבי Material ‏ (MDC) עוזרים למפתחים להטמיע את Material Design. ‫MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop

רכיבי Material לאינטרנט (MDC Web) הם בלתי תלויים ב-framework, והם בנויים באמצעות JavaScript רגיל. כך אפשר להשתמש ב-MDC Web בצורה חלקה בתהליך הפיתוח. אפשר להתקין את הרכיבים האלה לפי הצורך כדי לשפר את העיצוב של האפליקציה הקיימת.

מה תפַתחו

ב-codelab הזה, תחליפו כמה רכיבים קיימים בטופס ברכיבים שסופקו על ידי MDC Web:

רכיבי MDC Web ב-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

תראו הרבה פעילות ובסוף, במסוף אמורה להופיע הודעה שההתקנה הושלמה בהצלחה:

‫MDC Web משתמש במעבד מקדים של CSS שנקרא Sass. אם אתם משתמשים במעבד CSS מוקדם אחר (או בכלל לא), זה בסדר. אתם יכולים להשתמש ב-Sass לצד מעבד מקדים קיים על ידי התקנת CLI של sass או שימוש בפלאגין (לדוגמה, sass-loader ל-Webpack,‏ gulp-sass ל-Gulp או grunt-sass ל-Grunt) בשרשרת הכלים שלכם לבנייה.

כדי שהקוד שלנו יפעל בדפדפנים ישנים כמו IE 11, אנחנו משתמשים בכלי טרנספילציה שנקרא Babel כדי לבצע טרנספילציה של תחביר JavaScript של ES2015 ב-MDC Web לתחביר JavaScript של ES5.

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

הפעלת אפליקציה לתחילת הדרך

בספריית ההתחלה, מריצים את הפקודה:

npm start

המינוי ל-webpack-dev-server יתחיל. כדי לראות את הדף, פותחים את הדפדפן ועוברים לכתובת http://localhost:8080/.

הצלחת! יוצג טופס הכתובת למשלוח של האפליקציה:

3. עדכון הכפתור

לחצן התקנה של MDC

לוחצים על Ctrl+C כדי להפסיק את שרת הפיתוח. לאחר מכן, מתקינים את לחצן ה-MDC NPM package ומפעילים מחדש את השרת:

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 על ידי הוספת הקוד הבא לאלמנט <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

טוענים מחדש את הדף, ואמורה להופיע הודעה דומה לזו:

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

4. עדכון רכיב הבחירה

רכיב ה-Select של MDC עוטף רכיב <select> HTML מקורי. אפשר להשתמש בו בכל מקום שבו בדרך כלל משתמשים ב<select>. נעדכן את השדה State (מדינה).

התקנת מודול 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>

קוד ה-markup שמתקבל צריך להיראות כך:

<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';

כדי ליצור מופע של רכיב ה-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> בשדה Name. מחליפים את הכיתה 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>

קוד ה-markup שמתקבל צריך להיראות כך:

<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);
});

טוענים מחדש את הדף, שאמור להיראות עכשיו כך:

שדות הטקסט עודכנו כך שיוכלו להשתמש בהתאמת העיצוב של Google Material Design.

6. Recap

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

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

השלבים הבאים

אפשר לעיין בעוד רכיבים ב-MDC Web בקטלוג של MDC Web.

אם אתם רוצים להשתמש ב-MDC Web עם framework מסוים, כדאי לעבור אל MDC-112: שילוב של MDC עם Web Frameworks.

הצלחתי להשלים את ה-codelab הזה בזמן סביר ובמאמץ סביר

נכון מאוד

נכון

אין לי דעה לכאן או לכאן

לא נכון

לא נכון בכלל

אני רוצה להמשיך להשתמש ב-Material Components בעתיד

נכון מאוד

נכון

אין לי דעה לכאן או לכאן

לא נכון

לא נכון בכלל

MDC-111 Web: שילוב רכיבי Material ב-codebase (אינטרנט) קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

1. מבוא

מה תפַתחו

רכיבי MDC Web ב-Codelab הזה

מה תצטרכו

מה רמת הניסיון שלך בפיתוח אתרים?

2. הגדרת סביבת הפיתוח

הורדת האפליקציה לתחילת הדרך של Codelab

...או לשכפל אותו מ-GitHub

התקנת יחסי תלות בפרויקט

הפעלת אפליקציה לתחילת הדרך

3. עדכון הכפתור

לחצן התקנה של MDC

ייבוא שירות CSS

עדכון התגים

הוספת האפקט

ייבוא הגופן Roboto

4. עדכון רכיב הבחירה

התקנת מודול MDC Node

ייבוא שירות CSS

עדכון התגיות

ייבוא ה-JS

5. עדכון שדות הטקסט

התקנת מודול MDC Node

הוספת ה-CSS

עדכון התגים

ייבוא ה-JS

6. Recap

השלבים הבאים

הצלחתי להשלים את ה-codelab הזה בזמן סביר ובמאמץ סביר

אני רוצה להמשיך להשתמש ב-Material Components בעתיד

MDC-111 Web: שילוב רכיבי Material ב-codebase (אינטרנט)