تساعد Material Components (MDC) المطوّرين في تنفيذ Material Design. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter. material.io/develop |
في الدرسين العمليين MDC-101 وMDC-102، استخدمت "مكوّنات Material" (MDC) لإنشاء أساسيات تطبيق يُسمى Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. يبدأ تدفق المستخدم في هذا التطبيق بشاشة تسجيل الدخول، ثم ينتقل المستخدم إلى شاشة رئيسية تحتوي على منتجات.
تمّ توسيع نطاق Material Design مؤخرًا لمنح المصمّمين والمطوّرين مرونة أكبر في التعبير عن العلامة التجارية لمنتجاتهم. في هذا الدرس التطبيقي، ستستخدم "مكوّنات تصميم المواد" لتخصيص تطبيق Shrine ليعكس الأسلوب الفريد للعلامة التجارية بطرق أكثر من أي وقت مضى.
ما ستنشئه
في هذا الدرس التطبيقي، ستخصّص تطبيق Shrine ليعكس علامته التجارية باستخدام:
- اللون
- فن الطباعة
- الارتفاع
- الشكل
- التنسيق
مكوّنات وأنظمة فرعية من MDC Web مستخدَمة في هذا الدرس التطبيقي حول الترميز
- المظهر
- فن الطباعة
- الارتفاع
- قائمة الصور
المتطلبات
- إصدار حديث من Node.js (الذي يأتي مجمّعًا مع npm، وهي أداة لإدارة حِزم JavaScript)
- نموذج الرمز البرمجي (سيتم تنزيله في الخطوة التالية)
- معرفة أساسية بلغات HTML وCSS وJavaScript
ما هو تقييمك لمستوى خبرتك في تطوير الويب؟
هل سبق لك المشاركة في دورة MDC-102؟
إذا أكملت دورة MDC-102 التدريبية، من المفترض أن يكون الرمز البرمجي جاهزًا للاستخدام في هذا الدرس العملي. انتقِل إلى الخطوة 3: تغيير اللون.
تنزيل تطبيق الدرس التطبيقي الأوّلي
يقع التطبيق الأولي في الدليل material-components-web-codelabs-master/mdc-103/starter. احرص على cd في هذا الدليل قبل البدء.
...أو استنسِخه من GitHub
لاستنساخ هذا الدرس التطبيقي العملي من GitHub، شغِّل الأوامر التالية:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
تثبيت التبعيات الخاصة بالمشروع
من دليل البداية material-components-web-codelabs/mdc-103/starter (يجب أن يكون دليلك الحالي إذا اتّبعت الخطوة أعلاه)، نفِّذ ما يلي:
npm install
ستلاحظ الكثير من الأنشطة، وفي النهاية، من المفترض أن تعرض لك نافذة الأوامر عملية تثبيت ناجحة:
تشغيل تطبيق المبتدئين
في الدليل نفسه، نفِّذ الأمر التالي:
npm start
سيبدأ webpack-dev-server. انتقِل بمتصفّحك إلى http://localhost:8080/ لعرض الصفحة.
اكتمال النقل بنجاح من المفترض أن تظهر صفحة تسجيل الدخول إلى تطبيق Shrine في المتصفّح. املأ حقلَي "اسم المستخدم" و"كلمة المرور"، ثم انقر على الزر "التالي" للانتقال إلى الصفحة الرئيسية. يجب أن يعرض قائمة تنقّل على اليمين بجانب شبكة من صور المنتجات.
مع أنّ درج التنقّل يعمل بشكل جيد، لنحرص على أن يتوافق مع العلامة التجارية Shrine من خلال تغيير لونه وارتفاعه ونمطه.
تم إنشاء مظهر الألوان هذا بواسطة مصمّم باستخدام ألوان مخصّصة (كما هو موضّح في الصورة أدناه). يحتوي على ألوان تم اختيارها من العلامة التجارية لـ Shrine وتم تطبيقها على أداة Material Theme Editor، ما أدّى إلى توسيعها لإنشاء لوحة ألوان أكثر شمولاً. (هذه الألوان ليست من لوحات ألوان Material لعام 2014).
لنغيّر لون لوحة التنقّل في تطبيق Shrine ليتناسب مع نظام الألوان هذا.
تجاوز ألوان المظهر
أنشئ ملفًا جديدًا باسم _variables.scss يتضمّن ما يلي:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;بعد ذلك، استورِدها في أعلى _common.scss:
@import "./variables";إضافة نمط CSS إلى لوحة التنقّل
في ملف home.scss، أضِف عبارة الاستيراد التالية بعد عمليات الاستيراد الحالية:
@import "@material/ripple/mixins";بعد ذلك، أضِف الأنماط التالية، مع إنشاء الفئة .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}أعِد تحميل الصفحة على http://localhost:8080/home.html. يجب أن تبدو شاشتك الرئيسية الآن على النحو التالي:
لنغيّر لون شاشة تسجيل الدخول ليتناسب مع نظام الألوان.
إضافة نمط CSS إلى صفحة تسجيل الدخول
في login.scss، أضِف الأسطر التالية:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}أضِف أيضًا استدعاءات mixin التالية داخل أداة اختيار CSS .username, .password:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}أعِد تحميل الصفحة على http://localhost:8080/. يجب أن تبدو شاشة تسجيل الدخول الآن على النحو التالي:
بالإضافة إلى تغييرات الألوان، قدّم لك المصمّم أيضًا أسلوب خط محددًا لاستخدامه على الموقع الإلكتروني. دعونا نضيف ذلك إلى لائحة التنقّل أيضًا.
لتثبيت حزمة الطباعة، شغِّل الأمر التالي:
npm install @material/typography
إضافة CSS للطباعة
في home.scss، أضِف عبارة الاستيراد التالية بعد عمليات الاستيراد الحالية:
@import "@material/typography/mdc-typography";بعد ذلك، أضِف استدعاء mixin التالي إلى فئة shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}بعد ذلك، لنضِف أنماطًا إلى عناصر الدرج.
إضافة فاصل أسطر
في home.html، أضِف ما يلي مباشرةً بعد العنصر <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>أضِف الأنماط التالية إلى home.scss:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}تعديل عناصر الصورة وتصنيفاتها
لتعديل العناصر والتصنيفات، أضِف الأنماط التالية إلى home.scss ضمن أداة الاختيار .product-list:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}إعادة تحميل الصفحة يجب أن تبدو شاشتك الرئيسية الآن على النحو التالي:
بعد أن أضفت إلى الصفحة أسلوبًا يتضمّن الألوان وأسلوب الخط الخاصَّين بتطبيق Shrine، لنلقِ نظرة على قائمة الصور التي تعرض منتجات Shrine. لنلفت الانتباه إلى المنتجات من خلال التركيز عليها بشكل أكبر.
لتثبيت حزمة Elevation، شغِّل:
npm install @material/elevation
إضافة عبارة الاستيراد
في home.scss، أضِف السطر التالي بعد آخر عبارة استيراد:
@import "@material/elevation/mdc-elevation";تضمين قائمة الصور في div جديد
في home.html، أضِف الترميز التالي حول العنصر <ul>:
<div class="shrine-body">
<ul...>
</div>تغيير الارتفاع باستخدام Sass mixins
في home.scss، أضِف ما يلي:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}مذهل لقد أضفت ظلًا إلى الحافة اليسرى للسطح الأبيض خلف عناصر قائمة الصور، بحيث يبدو وكأنّه يطفو قليلاً فوق شريط التنقّل.
بعد ذلك، لنغيّر التنسيق لعرض الصور بنِسب عرض إلى ارتفاع وأحجام مختلفة، حتى تبدو كل صورة فريدة عن غيرها.
تعديل رمز HTML
في home.html، عدِّل العنصر mdc-image-list ليحتوي على الفئة mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">إضافة صور
في home.html، غيِّر سمة src لكل عنصر img لتتطابق مع الصور الموجودة في المجلد assets. بعد ذلك، عدِّل نص التصنيف لكل صورة. عند الانتهاء، يجب أن يبدو على النحو التالي:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</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>
</ul>تعديل خدمة CSS
في home.scss، أزِل mixin mdc-image-list-standard-columns(4) واستبدِله بـ mixin التالي:
@include mdc-image-list-masonry-columns(4);بعد ذلك، أضِف قيم padding التالية إلى الفئة product-list في home.scss:
.product-list {
...
padding: 80px 100px 0;
}
يجب أن يتطابق الرمز الآن مع الرمز المُضمّن في مجلد complete/.
اللون هو وسيلة فعالة للتعبير عن علامتك التجارية، ويمكن أن يكون للتغيير البسيط في اللون تأثير كبير على تجربة المستخدم. لاختبار ذلك، لنرَ كيف سيبدو تطبيق Shrine إذا كان نظام الألوان الخاص بالعلامة التجارية مختلفًا تمامًا.
تعديل CSS
في _variables.scss، استبدِل المتغيّرات التي حدّدتها للمظهر الأساسي بما يلي:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;في login.scss، أزِل mixins في أداة الاختيار .username, .password. يجب أن يبدو على النحو التالي:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}بالإضافة إلى ذلك، أزِل عملية إلغاء mdc-button-ink-color mixin في فئة .cancel:
في home.scss، أضِف القاعدة التالية إلى فئة .home:
background-color: $mdc-theme-background;ضِمن أداة الاختيار .shrine-logo-drawer، استبدِل السمة fill باللون on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}وبالمثل، ضمن أداة الاختيار .shrine-title، اضبط السمة color على اللون on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
أخيرًا، أزِل mixin mdc-elevation المستخدَم سابقًا ضمن أداة الاختيار .shrine-body.
البناء والتنفيذ من المفترض أن يظهر المظهر الجديد الآن في المتصفّح.
انتقِل الآن إلى http://localhost:8080/home.html للاطّلاع على التغييرات في صفحة home.html.
لقد أنشأت الآن تطبيقًا يشبه مواصفات المصمّم.
الخطوات التالية
لقد استخدمت الآن مكوّنات MDC التالية: المظهر، والطباعة، والارتفاع، والشكل. يمكنك استكشاف المزيد من المكوّنات والأنظمة الفرعية في كتالوج MDC Web.