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