רכיבי Material (MDC) עוזרים למפתחים להטמיע את Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי UX ב-Google, והוא כולל עשרות רכיבי ממשק משתמש יפים ופונקציונליים. הוא זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter. material.io/develop |
ב-codelab MDC-101, השתמשתם בשני רכיבי Material (MDC) כדי ליצור ממשק משתמש של דף כניסה: שדה טקסט וכפתור. עכשיו נרחיב את זה ונוסיף ניווט, מבנה ונתונים.
מה תפַתחו
ב-codelab הזה תיצרו דף בית לאפליקציה בשם Shrine, אפליקציה למסחר אלקטרוני שמוכרת בגדים ומוצרים לבית. היא תכלול:
- חלונית הזזה לניווט
- רשימת תמונות מלאה במוצרים
רכיבי MDC Web ב-Codelab הזה
- חלונית הזזה
- רשימת תמונות
מה צריך להכין
- גרסה עדכנית של Node.js (שמגיעה עם npm, כלי לניהול חבילות JavaScript).
- קוד לדוגמה (להורדה בשלב הבא)
- ידע בסיסי ב-HTML, CSS ו-JavaScript
מה רמת הניסיון שלך בפיתוח אתרים?
המשך מ-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.
עכשיו, אחרי שדף הכניסה נראה טוב, אפשר להוסיף לאפליקציה כמה מוצרים. מזינים שם משתמש וסיסמה תקינים ולוחצים על הלחצן 'הבא' כדי לעבור לדף הבית.
כשהמשתמש מתחבר, מוצג לו דף בית עם הכיתוב 'הצלחת!'. נהדר! אבל עכשיו המשתמש צריך לדעת מה לעשות ואיפה הוא נמצא באפליקציה. כדי לעזור לו, נוסיף ניווט.
דפוסי הניווט של 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. עכשיו דף הבית אמור להיראות כך:
עכשיו יש בדף הבית מגירת ניווט קבועה שמציגה פריטי ניווט שונים, והפריט הראשון פעיל.
עכשיו, כשיש לאפליקציה שלנו מבנה מסוים, נארגן את התוכן על ידי הצבתו ברשימת תמונות.
התקנה של רשימת תמונות של MDC
כדי להתקין את החבילה של הרכיב image list, מריצים את הפקודה:
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.
רענן. עכשיו דף הבית אמור להיראות כך:
ברשימת התמונות מוצגות ארבע תמונות בכל שורה, והגודל של התמונות מותאם אוטומטית לשטח המסך הזמין.
באתר יש תהליך בסיסי שמעביר את המשתמש מדף הכניסה לדף הבית, שבו אפשר לראות את המוצרים. בכמה שורות קוד בלבד, הוספתם מגירה ורשימת תמונות להצגת תוכן. דף הבית כולל עכשיו מבנה ותוכן בסיסיים.
השלבים הבאים
בעזרת מגירת הניווט ורשימת התמונות, השתמשתם עכשיו בשני רכיבי ליבה נוספים של Material Design מהספרייה של MDC Web. אפשר לעיין ברכיבים נוספים בקטלוג MDC Web.
הדף פועל באופן מלא, אבל עדיין לא משקף מותג או נקודת מבט מסוימים. בקורס MDC-103: Material Design Theming with Color, Shape, Elevation and Type, תלמדו איך להתאים אישית את הסגנון של הרכיבים האלה כדי ליצור מותג מודרני ודינמי.