מידע על Codelab זה
1. מבוא
Material Components (MDC) עוזר למפתחים להטמיע Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית המשתמש ב-Google, שכולל עשרות רכיבים יפים ופונקציונליים של ממשק המשתמש. זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
ב-Codelab MDC-101 השתמשת בשני רכיבי Material (MDC) כדי לבנות ממשק משתמש של דף התחברות: שדה הטקסט והלחצן. עכשיו נרחיב את הנושא באמצעות הוספת ניווט, מבנה ונתונים.
מה תפַתחו
ב-Codelab הזה תבנו דף בית לאפליקציה בשם Shrine, אפליקציית מסחר אלקטרוני שמוכרת בגדים ומוצרים לבית. היא תכלול:
- חלונית הזזה לניווט
- רשימת תמונות מלאה במוצרים
רכיבי MDC ב-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/ כדי לראות את הדף.
הצלחת! דף ההתחברות לאתר אמור להופיע ב-MDC-101 Codelab.
עכשיו, כשדף ההתחברות נראה טוב, נאכלס את האפליקציה במוצרים מסוימים. יש להזין שם משתמש וסיסמה תקפים ולאחר מכן ללחוץ על "הבא". כדי לעבור לדף הבית.
3. הוספה של חלונית הזזה לניווט
כשהמשתמש נכנס לחשבון, מוצג דף בית שבו כתוב "הצלחת!" נהדר! אבל עכשיו המשתמשים שלנו צריכים לבצע פעולות מסוימות ולהבין איפה הם נמצאים באפליקציה. כדי לעזור בכך, אפשר להוסיף את תכונת הניווט.
דפוסי הניווט של Material Design מאפשרים מידה גבוהה של נוחות השימוש. חלונית ההזזה לניווט 'חומר' מספקת ניווט וגישה מהירה לפעולות אחרות. שנוסיף אחת?
התקנת חלונית ההזזה והרשימה של MDC
כדי להתקין את החבילות של רכיב חלונית ההזזה, מריצים את הפקודה:
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, צריך להוסיף את קוד ה-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>
לאחר מכן מדביקים אותו 15 פעמים אחרי הפריט הקיים (לפני תג </ul> הסוגר). התוצאה תהיה 16 תמונות בסך הכול. עדיין לא צריך לדאוג לגבי תמונות או כותרות ייחודיות. תגיעו לתחנות MDC-103.
רענן. עכשיו דף הבית אמור להיראות כך:
ברשימת התמונות מוצגות ארבע תמונות בכל שורה, והתמונות מותאמות באופן אוטומטי לשטח המסך הזמין.
5. Recap
באתר שלכם יש תהליך בסיסי שמעביר את המשתמש מדף הכניסה לדף הבית, שבו ניתן לראות את המוצרים. בכמה שורות קוד בלבד הוספתם חלונית הזזה ורשימת תמונות כדי להציג את התוכן. לדף הבית יש עכשיו מבנה ותוכן בסיסיים.
השלבים הבאים
עם חלונית ההזזה ורשימת התמונות, השתמשתם עכשיו בשני רכיבי ליבה נוספים של Material Design מספריית האינטרנט של MDC! רכיבים נוספים זמינים בקטלוג האינטרנט של MDC.
הוא פועל באופן מלא, אבל דף הבית עדיין לא מייצג מותג מסוים או נקודת מבט מסוימת. ב-MDC-103: עיצוב חדשני מהותי עם צבע, צורה, גובה וסוג, אפשר להתאים אישית את הסגנון של הרכיבים האלה כדי לבטא מותג מודרני ותוסס.