تساعد Material Components (MDC) المطوّرين في تنفيذ Material Design. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter. material.io/develop |
في الدرس التطبيقي حول الترميز MDC-101، استخدَمت مكوّنَين من "مكوّنات التصميم المتعدد الأبعاد" (MDC) لإنشاء واجهة مستخدم لصفحة تسجيل الدخول: حقل النص والزر. لنوسّع الآن نطاق هذا المثال من خلال إضافة عناصر التنقّل والبنية والبيانات.
ما ستنشئه
في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة رئيسية لتطبيق يُسمى Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. ستتضمّن هذه الرسالة ما يلي:
- لائحة التنقّل
- قائمة صور مليئة بالمنتجات
مكوّنات MDC Web في هذا الدرس التطبيقي حول الترميز
- الدرج
- قائمة الصور
المتطلبات
- إصدار حديث من Node.js (الذي يأتي مجمّعًا مع npm، وهي أداة لإدارة حِزم JavaScript)
- نموذج الرمز البرمجي (سيتم تنزيله في الخطوة التالية)
- معرفة أساسية بلغات HTML وCSS وJavaScript
ما هو تقييمك لمستوى خبرتك في تطوير الويب؟
هل سبق لك المشاركة في دورة MDC-101؟
إذا أكملت MDC-101، من المفترض أن يكون الرمز البرمجي جاهزًا لهذا الدرس العملي. انتقِل إلى الخطوة 3: إضافة قائمة تنقّل.
تنزيل تطبيق الدرس التطبيقي الأوّلي
يقع تطبيق البداية في دليل material-components-web-codelabs-master/mdc-102/starter. احرص على cd في هذا الدليل قبل البدء.
...أو استنسِخه من GitHub
لاستنساخ هذا الدرس التطبيقي العملي من 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 من برنامج MDC-101 التعليمي.
بعد أن أصبحت صفحة تسجيل الدخول تبدو جيدة، لنملأ التطبيق ببعض المنتجات. أدخِل اسم مستخدم وكلمة مرور صالحَين، ثم انقر على الزر "التالي" للانتقال إلى الصفحة الرئيسية.
عندما يسجّل المستخدم الدخول، تظهر صفحة رئيسية مكتوب عليها "أحسنت!". رائع. ولكن يحتاج المستخدم الآن إلى إجراءات يتّخذها وإلى معرفة مكانه في التطبيق، لذا لنضِف عناصر التنقّل.
توفّر أنماط التنقّل في Material Design درجة عالية من قابلية الاستخدام. توفّر "لائحة التنقّل" في Material إمكانية التنقّل والوصول السريع إلى إجراءات أخرى. لنضِف واحدًا.
تثبيت "الدرج والقائمة" في 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. يجب أن تبدو صفحتك الرئيسية الآن على النحو التالي:
أصبحت الصفحة الرئيسية تتضمّن الآن قائمة تنقّل دائمة تعرض عناصر تنقّل مختلفة، مع تفعيل العنصر الأول.
بعد أن أصبح تطبيقنا يتضمّن بعض البنية، لننظّم المحتوى من خلال وضعه في قائمة صور.
تثبيت "قائمة صور 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.
تحديث. يجب أن تبدو الصفحة الرئيسية الآن على النحو التالي:
تعرض قائمة الصور أربع صور في كل صف، ويتم تغيير حجم الصور تلقائيًا لتلائم مساحة الشاشة المتاحة.
يتضمّن موقعك الإلكتروني مسارًا أساسيًا ينقل المستخدم من صفحة تسجيل الدخول إلى صفحة رئيسية يمكن فيها عرض المنتجات. في بضعة أسطر من الرمز البرمجي، أضفتَ درجًا وقائمة صور لعرض المحتوى. تتضمّن الصفحة الرئيسية الآن بنية أساسية ومحتوى.
الخطوات التالية
باستخدام الدرج وقائمة الصور، تكون قد استخدمت الآن اثنين من المكوّنات الأساسية الأخرى في Material Design من مكتبة MDC Web. يمكنك استكشاف المزيد من المكوّنات من خلال الانتقال إلى كتالوج MDC Web.
على الرغم من أنّ الصفحة الرئيسية تعمل بشكل كامل، إلا أنّها لا تعبّر بعد عن أي علامة تجارية أو وجهة نظر معيّنة. في MDC-103: تصميم السمات في Material Design باستخدام الألوان والأشكال والارتفاعات والأنواع، ستخصّص نمط هذه المكوّنات للتعبير عن علامة تجارية عصرية ونابضة بالحياة.