רכיבי 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 ב-Codelab הזה
- שדה טקסט
- לחצן
- גל
מה צריך להכין
- גרסה עדכנית של Node.js (שמגיעה עם npm, כלי לניהול חבילות JavaScript).
- קוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, CSS ו-JavaScript
אנחנו תמיד שואפים לשפר את המדריכים שלנו. מה רמת הניסיון שלך בפיתוח אתרים?
הורדת אפליקציית ה-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;
}אחרי שהכרתם את קוד ההתחלה, בואו ניישם את הרכיב הראשון שלנו.
כדי להתחיל, נוסיף שני שדות טקסט לדף הכניסה, שבהם אנשים יוכלו להזין את שם המשתמש והסיסמה שלהם. נשתמש ברכיב MDC Text Field, שכולל פונקציונליות מובנית שמציגה תווית צפה ומפעילה אפקט גלי.
התקנה של MDC Text Field
רכיבי MDC Web מתפרסמים באמצעות חבילות NPM. כדי להתקין את החבילה של רכיב שדה הטקסט, מריצים את הפקודה:
npm install @material/textfield
הוספת ה-HTML
ב-index.html, מוסיפים את הקוד הבא בתוך האלמנט <form> בגוף:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>מבנה ה-DOM של שדה הטקסט של MDC מורכב מכמה חלקים:
- הרכיב הראשי,
mdc-text-field - רכיבי משנה
mdc-text-field__input,mdc-floating-labelו-mdc-line-ripple
הוספת ה-CSS
ב-login.scss, מוסיפים את הצהרת הייבוא הבאה אחרי הייבוא הקיים:
@import "@material/textfield/mdc-text-field";באותו קובץ, מוסיפים את הסגנונות הבאים כדי ליישר למרכז את שדות הטקסט:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}הוספת 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".
משנים את שני רכיבי <div class="mdc-text-field"> כך שייראו כך:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>מרעננים את הדף בכתובת http://localhost:8080/. עכשיו אמור להופיע דף עם שני שדות טקסט: Username (שם משתמש) ו-Password (סיסמה).
לוחצים על שדות הטקסט כדי לראות את האנימציה של התווית הצפה ואת האנימציה של האדווה בשורה (הגבול התחתון שמתרחב):
בשלב הבא, נוסיף שני לחצנים לדף הכניסה: 'ביטול' ו'הבא'. נשתמש ברכיב MDC Button יחד עם הרכיב MDC Ripple כדי ליצור את אפקט האדווה האייקוני של Material Design.
לחצן התקנת MDC
כדי להתקין את החבילה של רכיב הלחצן, מריצים:
npm install @material/button
הוספת ה-HTML
ב-index.html, מוסיפים את הקוד הבא מתחת לתג הסגירה של רכיב <div class="mdc-text-field 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
בחלק העליון של login.js, מוסיפים את הצהרת הייבוא הבאה:
import {MDCRipple} from '@material/ripple';כדי ליצור את האדוות, מוסיפים את הקוד הבא ל-login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));מכיוון שאנחנו לא צריכים לשמור הפניה למופע של ripple, אין צורך להקצות אותו למשתנה.
זהו! יש לרענן את הדף. כשלוחצים על כל לחצן, מוצג אפקט של גל דיו.
ממלאים את שדות הטקסט בערכים תקינים ולוחצים על הלחצן 'הבא'. כל הכבוד! תמשיכו לעבוד בדף הזה ב-MDC-102.
באמצעות תגי עיצוב בסיסיים של HTML וכמה שורות של CSS ו-JavaScript, ספריית Material Components for the web עזרה לכם ליצור דף כניסה יפה שעומד בהנחיות של Material Design, ונראה ומתנהג באופן עקבי בכל המכשירים.
השלבים הבאים
שלושת רכיבי הליבה בספריית MDC Web הם Text Field (שדה טקסט), Button (לחצן) ו-Ripple (אפקט אדווה), אבל יש עוד הרבה רכיבים. אפשר גם לעיין בשאר הרכיבים ב-MDC Web.
במאמר MDC-102: Material Design Structure and Layout אפשר לקרוא על חלונית הניווט ועל רשימת התמונות. תודה שניסית את רכיבי Material. אנחנו מקווים שנהניתם מה-Codelab הזה.