1. מבוא
רכיבי Material (MDC) עוזרים למפתחים להטמיע את Material Design. MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
ב-codelab MDC-101, השתמשתם בשני רכיבי Material (MDC) כדי ליצור ממשק משתמש של דף כניסה: שדה טקסט וכפתור. עכשיו נרחיב את זה ונוסיף ניווט, מבנה ונתונים.
מה תפַתחו
ב-codelab הזה תיצרו דף בית לאפליקציה בשם Shrine, אפליקציית מסחר אלקטרוני שמוכרת בגדים ומוצרים לבית. היא תכלול:
- חלונית הזזה לניווט
- רשימת תמונות מלאה של מוצרים
MDC Web components in this codelab
- חלונית הזזה
- רשימת תמונות
מה תצטרכו
- גרסה עדכנית של Node.js (שמגיעה עם npm, כלי לניהול חבילות JavaScript).
- קוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, ב-CSS וב-JavaScript
מה רמת הניסיון שלך בפיתוח אתרים?
2. הגדרת סביבת הפיתוח
המשך מ-MDC-101?
אם השלמתם את MDC-101, הקוד שלכם אמור להיות מוכן ל-codelab הזה. דילוג לשלב 3: הוספת חלונית הזזה לניווט.
הורדת אפליקציית ה-codelab למתחילים
אפליקציה לתחילת הדרך נמצאת בספרייה material-components-web-codelabs-master/mdc-102/starter. חשוב לעבור לספרייה הזו באמצעות הפקודה cd לפני שמתחילים.
...או לשכפל אותו מ-GitHub
כדי לשכפל את ה-codelab הזה מ-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/.
הצלחת! אמור להופיע דף הכניסה של Shrine מתוך ה-codelab MDC-101.
עכשיו, אחרי שדף הכניסה נראה טוב, נמלא את האפליקציה במוצרים. מזינים שם משתמש וסיסמה תקינים ולוחצים על הלחצן 'הבא' כדי לעבור לדף הבית.
3. הוספה של חלונית הזזה לניווט
כשהמשתמש מתחבר, מוצג לו דף בית עם הכיתוב 'עשית את זה!'. נהדר! אבל עכשיו המשתמש צריך לדעת מה לעשות ואיפה הוא נמצא באפליקציה. כדי לעזור לו, נוסיף ניווט.
דפוסי הניווט של Material Design מציעים רמת שימושיות גבוהה. חלונית ההזזה לניווט של Material מספקת ניווט וגישה מהירה לפעולות אחרות. בואו נוסיף אחד.
התקנה של חלונית הזזה ורשימה של MDC
כדי להתקין את החבילות של רכיב חלונית הזזה, מריצים את הפקודה:
npm install @material/drawer @material/list
הוספת ה-HTML
ב-home.html, מחליפים את הכיתוב You did it! בתגי העיצוב הבאים של חלונית ההזזה והפריטים שבה:
<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, מוסיפים את קוד ה-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;
}
הסגנונות האלה מנחים את רשימת התמונות להציג תמונות ב-4 עמודות, כדי להבטיח שרשימת התמונות תגולל באופן עצמאי מהמגירה.
יש לרענן את הדף. עכשיו דף הבית אמור להיראות כך:
מטרת רשימת התמונות היא להציג הרבה תמונות באוסף, לכן כדאי להוסיף עוד תמונות כדי לראות טוב יותר איך הרכיב פועל.
ב-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>
אחר כך מדביקים אותו 15 פעמים אחרי הפריט הקיים (לפני תג הסגירה </ul>). התוצאה תהיה 16 תמונות. אל תדאגו לגבי תמונות ושמות ייחודיים – תלמדו על זה בקורס MDC-103.
רענן. עכשיו דף הבית אמור להיראות כך:
ברשימת התמונות מוצגות ארבע תמונות בכל שורה, והגודל של התמונות מותאם אוטומטית לשטח המסך הזמין.
5. Recap
באתר יש תהליך בסיסי שמעביר את המשתמש מדף הכניסה לדף הבית, שבו אפשר לראות את המוצרים. בכמה שורות קוד בלבד, הוספתם חלונית הזזה ורשימת תמונות להצגת תוכן. דף הבית כולל עכשיו מבנה ותוכן בסיסיים.
השלבים הבאים
בעזרת מגירת הצד ורשימת התמונות, השתמשתם עכשיו בשני רכיבי ליבה נוספים של Material Design מהספרייה של MDC Web. אפשר לעיין ברכיבים נוספים בקטלוג האינטרנט של MDC.
הדף פועל באופן מלא, אבל עדיין לא משקף מותג או נקודת מבט מסוימים. בקורס MDC-103: Material Design Theming with Color, Shape, Elevation and Type, תלמדו איך להתאים אישית את הסגנון של הרכיבים האלה כדי להביע מותג מודרני ותוסס.