1. מבוא
רכיבי Material (MDC) עוזרים למפתחים להטמיע את Material Design. MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
מהם Material Design ו-Material Components for the Web?
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, שיכלול:
- שני שדות טקסט, אחד להזנת שם משתמש והשני להזנת סיסמה
- שני לחצנים, אחד ל'ביטול' ואחד ל'הבא'
- שם האתר (Shrine)
- תמונה של הלוגו של Shrine
MDC Web components in this 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 והלוגו של 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 מעוצבים באמצעות מחלקות CSS של mdc-*, כמו המחלקה 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 Text Field, שכולל פונקציונליות מובנית שמציגה תווית צפה ומפעילה אפקט גלי של מגע.
התקנה של MDC Text Field
רכיבי 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בשדה הטקסט Password לערך"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/. עכשיו אמור להופיע דף עם שני שדות טקסט: Username (שם משתמש) ו-Password (סיסמה).
לוחצים על שדות הטקסט כדי לראות את האנימציה של התווית הצפה ואת האנימציה של האדווה בשורה (הקו התחתון של הגבול שמתרחב):
4. הוספת כפתורים
בשלב הבא, נוסיף שני לחצנים לדף הכניסה: 'ביטול' ו'הבא'. נשתמש ברכיב MDC Button יחד עם רכיב 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'));
מכיוון שאנחנו לא צריכים לשמור הפניה למופע של Ripple, אין צורך להקצות אותו למשתנה.
זהו! יש לרענן את הדף. כשלוחצים על כל כפתור, מוצג אפקט של גל דיו.
ממלאים את שדות הטקסט בערכים תקינים ולוחצים על הלחצן 'הבא'. כל הכבוד! תמשיכו לעבוד בדף הזה ב-MDC-102.
5. Recap
באמצעות תגי עיצוב בסיסיים של HTML וכמה שורות של CSS ו-JavaScript, ספריית Material Components for the web עזרה לכם ליצור דף כניסה יפה שעומד בהנחיות של Material Design, ונראה ומתנהג באופן עקבי בכל המכשירים.
השלבים הבאים
שדה הטקסט, הלחצן והאפקט של גלי ההדף הם שלושה רכיבי ליבה בספריית MDC Web, אבל יש עוד הרבה רכיבים אחרים. אפשר גם לעיין בשאר הרכיבים ב-MDC Web.
במאמר MDC-102: Material Design Structure and Layout אפשר לקרוא על חלונית הזזה לניווט ועל רשימת התמונות. תודה שניסית את רכיבי Material. אנחנו מקווים שנהניתם מה-Codelab הזה!