1. מבוא
Material Components (MDC) עוזרים למפתחים להטמיע את Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית משתמש ב-Google, והוא כולל עשרות רכיבי ממשק משתמש יפים ופונקציונליים. הוא זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
ב-Codelab MDC-101 השתמשת בשני רכיבי Material (MDC) כדי לבנות ממשק משתמש של דף התחברות: שדה הטקסט והלחצן. עכשיו נרחיב את הנושא באמצעות הוספת ניווט, מבנה ונתונים.
מה תפַתחו
בקודלאב הזה תלמדו ליצור דף בית לאפליקציה בשם Shrine, אפליקציית מסחר אלקטרוני שמוכרת בגדים ומוצרי בית. היא תכלול את הפרטים הבאים:
- חלונית הזזה לניווט
- רשימת תמונות מלאה של מוצרים
רכיבי MDC ב-Codelab הזה
- חלונית הזזה
- רשימת תמונות
מה צריך להכין
- גרסה עדכנית של Node.js (שכוללת את npm, מנהל חבילות של JavaScript).
- הקוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, ב-CSS וב-JavaScript
מה מידת הניסיון שלך בפיתוח אינטרנט?
2. הגדרת סביבת הפיתוח
ממשיכים לעבור מ-MDC-101?
אם השלמתם את קורס MDC-101, הקוד שלכם אמור להיות מוכן לקודלאב הזה. דילוג לשלב 3: הוספה של חלונית הזזה לניווט.
להורדת האפליקציה לתחילת פעולה של Codelab
אפליקציית ההתחלה נמצאת בספרייה material-components-web-codelabs-master/mdc-102/starter. חשוב להיכנס לספרייה הזו באמצעות cd לפני שמתחילים.
...או לשכפל אותו מ-GitHub
כדי להעתיק (clone) את סדנת הקוד הזו מ-GitHub, מריצים את הפקודות הבאות:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
תלות של פרויקטים בהתקנות
הספרייה הנוכחית אמורה להיות material-components-web-codelabs/mdc-102/starter. משם, מריצים את הפקודה הבאה:
npm install
לאחר שמופיעה פעילות רבה, המסוף אמור להראות התקנה מוצלחת:
הפעלת האפליקציה למתחילים
באותו ספרייה, מריצים את הפקודה הבאה:
npm start
webpack-dev-server יתחיל. מכוונים את הדפדפן אל http://localhost:8080/ כדי לראות את הדף.
הצלחת! דף ההתחברות לאתר אמור להופיע ב-MDC-101 Codelab.
עכשיו, אחרי שדף ההתחברות נראה טוב, נוסיף לאפליקציה כמה מוצרים. עליך להזין שם משתמש וסיסמה תקפים ולאחר מכן ללחוץ על הלחצן 'הבא' כדי לעבור לדף הבית.
3. הוספת חלונית ההזזה לניווט
כשהמשתמש נכנס לחשבון, מוצג דף בית שבו כתוב "הצלחת!" נהדר! עכשיו המשתמש צריך לבצע פעולות ולהבין איפה הוא נמצא באפליקציה. כדי לעזור לו, נוסיף ניווט.
דפוסי הניווט של Material Design מאפשרים מידה גבוהה של נוחות השימוש. חלונית הניווט בסגנון Material מאפשרת ניווט וגישה מהירה לפעולות אחרות. נוסיף אחת.
התקנה של MDC Drawer ו-List
כדי להתקין את החבילות של רכיב התצוגה הנשלפת, מריצים את הפקודה:
npm install @material/drawer @material/list
הוספת ה-HTML
בקטע home.html, מחליפים את הטקסט 'הצלחת!' בסימון הבא של המגירה והפריטים שלה:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
הוספה של שירות ה-CSS
ב-home.scss, צריך להוסיף את הצהרות הייבוא הבאות אחרי הייבוא הקיים:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
בתחתית הקובץ home.scss, מוסיפים את הסגנונות הבאים:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
הוספת ה-JavaScript
כדי לאפשר ניווט תקין במקלדת, אנחנו צריכים ליצור מופע של רשימת MDC בתוך חלונית הניווט. פותחים את הקובץ home.js, שהוא ריק כרגע, ומוסיפים את הקוד הבא:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
מרעננים את הדף בכתובת http://localhost:8080/home.html. עכשיו דף הבית אמור להיראות כך:
עכשיו בדף הבית יש חלונית הזזה לניווט קבועה, שבה מוצגים פריטי ניווט שונים, והפריט הראשון פעיל.
4. הוספת תמונות עם תוויות טקסט
עכשיו, אחרי שיש לאפליקציה שלנו מבנה כלשהו, נארגן את התוכן על ידי הצבתו ברשימת תמונות.
התקנת רשימת תמונות של MDC
כדי להתקין את החבילה של רכיב רשימת התמונות, מריצים את הפקודה:
npm install @material/image-list
הוספת ה-HTML של רשימה שיש בה פריט אחד
נתחיל בהוספת רשימת תמונות לצד חלונית הניווט. נתחיל את הרשימה על ידי הוספת פריט יחיד, שמורכב מתמונה ותווית טקסט.
ב-home.html, מוסיפים את הקוד הבא אחרי סוף הרכיב <aside>:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
הרשימה כוללת גם את הכיתה product-list, שבה יוחלו סגנונות מותאמים אישית, גם במדריך הזה וגם ב-MDC-103.
הוספת ה-CSS
קודם כול, ב-home.scss, מוסיפים ייבוא של סגנונות הרכיבים של רשימת התמונות אחרי הייבוא הקיים:
@import "@material/image-list/mdc-image-list";
בשלב הבא, מוסיפים את הסגנונות הבאים אחרי הסגנונות הראשוניים של דף הבית:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
הסגנונות האלה מורים לרשימת התמונות להציג תמונות בארבע עמודות, כדי לוודא שאפשר לגלול ברשימת התמונות בנפרד מהמגירה.
יש לרענן את הדף. עכשיו דף הבית אמור להיראות כך:
רשימת תמונות מיועדת להצגת תמונות רבות בקולקציה, לכן נוסיף עוד תמונות כדי לראות טוב יותר איך הרכיב פועל.
ב-home.html, מעתיקים את הרכיב <li> הקיים:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
לאחר מכן מדביקים אותו אחרי הפריט הקיים (לפני תג הסגירה </ul>) 15 פעמים. התוצאה תהיה 16 תמונות בסך הכול. עדיין לא צריך לדאוג לגבי תמונות וכותרות ייחודיות. כל הכבוד!
רענן. עכשיו דף הבית אמור להיראות כך:
רשימת התמונות מציגה ארבע תמונות בכל שורה, והתמונות מותאמות באופן אוטומטי לגודל שמתאים למסך.
5. Recap
באתר שלכם יש תהליך בסיסי שמעביר את המשתמש מדף הכניסה לדף הבית, שבו אפשר לראות את המוצרים. הוספת מגירה ורשימה של תמונות כדי להציג תוכן באמצעות כמה שורות קוד בלבד. לדף הבית יש עכשיו מבנה ותוכן בסיסיים.
השלבים הבאים
עם חלונית ההזזה ורשימת התמונות, השתמשתם עכשיו בשני רכיבי ליבה נוספים של Material Design מספריית האינטרנט של MDC! רכיבים נוספים זמינים בקטלוג האינטרנט של MDC.
הוא פועל באופן מלא, אבל דף הבית עדיין לא מייצג מותג מסוים או נקודת מבט מסוימת. במשחק MDC-103: עיצוב חדשני מהותי עם צבע, צורה, גובה וסוג, אפשר להתאים אישית את הסגנון של הרכיבים האלה כדי לבטא מותג מודרני ותוסס.