1. מבוא
Material Components (MDC) עוזר למפתחים להטמיע Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית המשתמש ב-Google, שכולל עשרות רכיבים יפים ופונקציונליים של ממשק המשתמש. זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
מהם Material Design ורכיבי Material for באינטרנט?
Material Design היא מערכת ליצירת מוצרים דיגיטליים נועזים ומרהיבים. כשמשלבים סגנון, מיתוג, אינטראקציה ותנועה במערך עקבי של עקרונות ורכיבים, צוותי המוצרים יכולים לממש את פוטנציאל העיצוב הגדול ביותר.
למחשבים ובאינטרנט לנייד, Material Components Web (MDC Web) מאחדים עיצוב והנדסה עם ספריית רכיבים ליצירת עקביות בין אפליקציות ואתרים. כל אחד מרכיבי MDC Web נמצא במודולים נפרדים של צמתים, כך שככל שמערכת Material Design מתפתחת, ניתן לעדכן את הרכיבים האלה בקלות כדי להבטיח הטמעה עקבית של פיקסלים ותאימות לתקני הפיתוח בממשק הקצה של Google. MDC זמין גם למכשירי Android, iOS ו-Flutter.
ב-Codelab הזה תבנו דף התחברות באמצעות מספר רכיבים של MDC Web.
מה תפַתחו
ה-Codelab הזה הוא הראשון מתוך שלושה מעבדי קוד שינחו אותך בתהליך היצירה של אפליקציה בשם Shrine, אתר מסחר אלקטרוני למכירת בגדים ומוצרים לבית. בקורס תלמדו איך אפשר להתאים אישית את הרכיבים כך שישקפו כל מותג או סגנון באמצעות MDC Web.
ב-Codelab הזה בונים דף התחברות למקדש שמכיל:
- שני שדות טקסט, אחד להזנת שם משתמש והשני לסיסמה
- שני לחצנים, אחד ל'ביטול' והשני בשביל 'הבא'
- שם האתר (Shrine)
- תמונת הלוגו של מקדש
רכיבי MDC ב-Codelab הזה
- שדה טקסט
- לחצן
- גל
מה צריך להכין
- גרסה עדכנית של Node.js (שנשלחת בחבילה עם npm, מנהל חבילות של JavaScript).
- הקוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, ב-CSS וב-JavaScript
אנחנו תמיד שואפים לשפר את המדריכים שלנו. איזה דירוג מגיע לדעתך לרמת הניסיון שלך בפיתוח אתרים?
2. הגדרת סביבת הפיתוח
להורדת האפליקציה לתחילת פעולה של Codelab
האפליקציה לתחילת הפעולה נמצאת בספרייה material-components-web-codelabs-master/mdc-101/starter. חשוב להקליד cd בספרייה הזו לפני שמתחילים.
...או לשכפל אותו מ-GitHub
כדי לשכפל את ה-Codelab הזה מ-GitHub, מריצים את הפקודות הבאות:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-101/starter
תלות של פרויקטים בהתקנות
מספריית ההתחלה, מריצים את:
npm install
יש פעילות רבה ובסופה, ההתקנה אמורה להופיע בטרמינל:
אם לא, מריצים את npm audit fix.
הפעלת אפליקציה לתחילת פעולה
באותה ספרייה, מריצים את:
npm start
webpack-dev-server יתחיל. מכוונים את הדפדפן אל http://localhost:8080/ כדי לראות את הדף.
הצלחת! הקוד ההתחלתי של דף ההתחברות של Shrine אמור לפעול בדפדפן. השם 'שריין' אמור להופיע. והלוגו של מקדש ה-Shrine שנמצא ממש מתחתיו.
לעיון בקוד
מטא-נתונים בתיקייה index.html
בספרייה למתחילים, פותחים את index.html באמצעות עורך הקוד המועדף עליכם. הקובץ צריך לכלול את הפרטים הבאים:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
כאן נעשה שימוש בתג <link> כדי לטעון את הקובץ bundle-login.css שנוצר על ידי Webpack, והתג <script> כולל את הקובץ bundle-login.js. בנוסף, אנחנו כוללים את normalize.css לעיבוד עקבי בדפדפנים שונים, וכן את הגופן Roboto מ-Google Fonts.
סגנונות מותאמים אישית בטווח login.scss
רכיבי MDC Web מעוצבים באמצעות mdc-* מחלקות CSS, כמו המחלקה mdc-text-field. (MDC Web מתייחסת למבנה ה-DOM שלו כחלק מה-API הציבורי שלו).
באופן כללי, מומלץ לבצע שינויים בסגנון מותאם אישית ברכיבים באמצעות מחלקות משלכם. יכול להיות שהבחנתם בכמה מחלקות CSS מותאמות אישית ב-HTML שלמעלה, כמו shrine-logo. הסגנונות האלה מוגדרים ב-login.scss כדי להוסיף סגנונות בסיסיים לדף.
אפשר לפתוח את login.scss ולראות את הסגנונות הבאים בדף ההתחברות:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
עכשיו, אחרי שקראתם את קוד ההתחלה, נטמיע את הרכיב הראשון.
3. הוספת שדות טקסט
כדי להתחיל, נוסיף שני שדות טקסט לדף ההתחברות שלנו, שבו המשתמשים יוכלו להזין את שם המשתמש והסיסמה שלהם. נשתמש ברכיב של שדה הטקסט של MDC, שכולל פונקציונליות מובנית שמציגה תווית צפה ומפעילה גלים ומגע.
מתקינים את שדה הטקסט של MDC
רכיבי MDC Web מתפרסמים באמצעות חבילות NPM. כדי להתקין את החבילה עבור רכיב שדה הטקסט, מריצים את:
npm install @material/textfield@^6.0.0
מוסיפים את ה-HTML
בקובץ index.html, מוסיפים את הטקסט הבא בתוך הרכיב <form> בגוף:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
מבנה DOM של שדה טקסט ב-MDC מורכב מכמה חלקים:
- הרכיב הראשי,
mdc-text-field - אלמנטים משניים
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelו-mdc-line-ripple
הוספה של שירות ה-CSS
ב-login.scss, צריך להוסיף את הצהרת הייבוא הבאה אחרי הייבוא הקיים:
@import "@material/textfield/mdc-text-field";
באותו הקובץ, מוסיפים את הסגנונות הבאים כדי ליישר ולמרכז את שדות הטקסט:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
הוספת ה-JavaScript
פותחים את הקובץ login.js, ריק כרגע. כדי לייבא את שדות הטקסט וליצור מופעים שלהם, מוסיפים את הקוד הבא:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
הוספת אימות HTML5
השדה 'שדות טקסט' מציין אם הקלט בשדה חוקי או מכיל שגיאה, באמצעות מאפיינים שסופקו על ידי ה-API לאימות טפסים של HTML5.
אתם צריכים:
- צריך להוסיף את המאפיין
requiredלרכיביmdc-text-field__inputבשדות הטקסט שם משתמש וסיסמה - מגדירים את המאפיין
minlengthשל הרכיבmdc-text-field__inputבשדה הטקסט סיסמה כ-"8"
משנים את שני רכיבי <label class="mdc-text-field mdc-text-field--filled"> כך:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
מרעננים את הדף בכתובת http://localhost:8080/. עכשיו אמור להופיע דף עם שני שדות טקסט: 'שם משתמש' ו'סיסמה'.
לחצו על שדות הטקסט כדי לראות את האנימציה של התווית הצפה ואת האנימציה של גלי הקו (קו הגבול התחתון שמתבלט כלפי חוץ):
4. הוספת לחצנים
בשלב הבא, נוסיף שני לחצנים לדף ההתחברות שלנו: "ביטול" ו-"Next". נשתמש ברכיב הלחצן של MDC, יחד עם רכיב ה-MDC Ripple, כדי להשלים את אפקט גלי הדיו האייקוני של Material Design.
לחצן להתקנת MDC
כדי להתקין את החבילה של רכיב הלחצן, מריצים את:
npm install @material/button@^6.0.0
מוסיפים את ה-HTML
ב-index.html, צריך להוסיף את הקוד הבא מתחת לתג הסוגר של הרכיב <label class="mdc-text-field mdc-text-field--filled password">:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
לגבי האפשרות 'ביטול' אנחנו משתמשים בסגנון ברירת המחדל של הלחצנים. לעומת זאת, התכונה 'הבא' הלחצן משתמש בווריאנט בסגנון הוגבה. הסטטוס הזה מצוין על ידי המחלקה mdc-button--raised.
כדי ליישר ביניהם בקלות מאוחר יותר, אנחנו כוללים את שני רכיבי mdc-button ברכיב <div>.
הוספה של שירות ה-CSS
ב-login.scss, צריך להוסיף את הצהרת הייבוא הבאה אחרי הייבוא הקיים:
@import "@material/button/mdc-button";
כדי ליישר את הלחצנים ולהוסיף שוליים סביבם, צריך להוסיף את הסגנונות הבאים ל-login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
הוספת גלי דיו ללחצנים
כשהמשתמש נוגע בלחצן או לוחץ עליו, הוא אמור להופיע בצורה של מעגל דיו. לרכיב גל הדיו נדרש JavaScript, לכן נוסיף אותו לדף.
כדי להתקין את החבילה של רכיב ההדים, מריצים את:
npm install @material/ripple@^6.0.0
בחלק העליון של login.js, מוסיפים את הצהרת הייבוא הבאה:
import {MDCRipple} from '@material/ripple';
כדי ליצור את הגלים, צריך להוסיף את הפרטים הבאים אל login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
מכיוון שאנחנו לא צריכים לשמור הפניה למופע של הדגל, אין צורך להקצות אותו למשתנה.
זהו! יש לרענן את הדף. אדמת דיו תוצג כשתלחצו על כל אחד מהלחצנים.
ממלאים את הערכים התקינים בשדות הטקסט ולוחצים על 'הבא' לחצן. הצלחת! הדף הזה ימשיך לפעול ב-MDC-102.
5. Recap
באמצעות שימוש בתגי עיצוב HTML בסיסיים ובכמה שורות בלבד של CSS ו-JavaScript, Material Components של ספריית האינטרנט עזר לכם ליצור דף התחברות יפהפה שתואם להנחיות של Material Design, נראה ומתנהג באופן עקבי בכל המכשירים.
השלבים הבאים
'שדה טקסט', 'לחצן' ו'הדים' הם שלושה רכיבי ליבה בספריית האינטרנט של MDC, אבל יש עוד המון רכיבים נוספים. אתם יכולים גם לעיין בשאר הרכיבים ב-MDC Web.
אפשר לעבור אל MDC-102: מבנה ופריסה של Material Design כדי לקבל מידע על חלונית ההזזה לניווט ועל רשימת התמונות. תודה שניסית את רכיבי Material. אנחנו מקווים שנהניתם מה-Codelab הזה!