דף זה תורגם על ידי Cloud Translation API.

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

1. מבוא

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

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

מה תפַתחו

ב-Codelab הזה מחליפים חלק מהרכיבים הקיימים בצורה ברכיבים שסופקו על ידי MDC Web:

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

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

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

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

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

הפעלת אפליקציה לתחילת פעולה

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

npm start

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

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

3. עדכון הלחצן

לחצן להתקנת MDC

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

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 עוטף רכיב <select> HTML מקורי. משתמשים בו בכל מקום שבו בדרך כלל משתמשים ב-<select>. נעדכן את השדה State (מדינה).

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

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

npm install @material/select
npm start

ייבוא של שירות ה-CSS

מוסיפים את הטקסט הבא לקובץ _theme.scss, מיד אחרי ייבוא הלחצן:

@import "@material/select/mdc-select";

עדכון ה-Markup

מאתרים את הרכיב <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';

כדי ליצור את הבחירה, צריך להוסיף את הפרטים הבאים בחלק התחתון של 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>

תגי העיצוב שיתקבלו אמורים להיראות כך:

<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> בדף.

הרכיב המטא של השדות Address (כתובת), City (עיר) ו-ZIP Code (מיקוד) צריך להיראות כך:

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

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

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

6. Recap

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

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

השלבים הבאים

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

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

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

נכון מאוד

נכון

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

לא נכון

לא נכון בכלל

ארצה להמשיך להשתמש ברכיבי Material Materials בעתיד

נכון מאוד

נכון

נייטרלי

לא נכון

לא נכון בכלל