تساعد المكونات المادية (MDC) مطوّري البرامج على تنفيذ التصميم المتعدد الأبعاد. أنشأ فريق من المهندسين ومصمِّمي تجارب المستخدمين في Google العشرات من مكوّنات واجهة المستخدم الجميلة والعملية، وهي متوفّرة لنظامَي التشغيل Android وiOS والويب وFltter. material.io/develop |
ما المقصود بالتصميم المتعدد الأبعاد ومكوناته على الإنترنت؟
التصميم المتعدد الأبعاد هو نظام لبناء منتجات رقمية غامقة وجميلة. من خلال توحيد النمط والعلامة التجارية والتفاعل والحركة ضمن مجموعة متسقة من المبادئ والمكوّنات، يمكن لفِرق المنتجات تحقيق أفضل إمكانات التصميم.
بالنسبة إلى أجهزة الكمبيوتر المكتبية والويب على الأجهزة الجوّالة، يجمع Material Components على الويب (MDC Web) بين التصميم والتصميم مع مكتبة من المكوّنات لتوفير الاتّساق بين التطبيقات والمواقع الإلكترونية. إنّ مكوّنات MDC على الويب متوفّرة في وحدات العُقد الخاصة بها، لذا مع تطوّر نظام التصميم المتعدد الأبعاد، يمكن تعديل هذه المكوّنات بسهولة لضمان تنفيذ متّسق تمامًا لوحدات البكسل والالتزام بمعايير تطوير الواجهة الأمامية من Google. يتوفر MDC أيضًا لأنظمة التشغيل Android وiOS وFltter.
في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة تسجيل دخول باستخدام العديد من مكوّنات MDC Web\s.
العناصر التي سيتم إنشاؤها
يُعد هذا الدرس التطبيقي الدروس الأولى حول الدروس التطبيقية حول الترميز التي سترشدك خلال عملية إنشاء تطبيق باسم Shrine، وهو موقع إلكتروني للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. سيوضّح هذا القسم كيفية تخصيص المكوّنات لتعكس أي علامة تجارية أو نمط باستخدام MDC Web.
في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة تسجيل دخول إلى الضريح تحتوي على:
- حقلا نص، أحدهما لإدخال اسم المستخدم والآخر لكلمة المرور
- زرّان: إحداهما للخاصية "&&إلغاء؛" و&
- اسم الموقع الإلكتروني (ضريح)
- صورة لشعار الضريح.
مكوّنات MDC على الويب في هذا الدرس التطبيقي حول الترميز
- حقل نص
- زرّ
- موجة
المتطلبات اللازمة
- إصدار حديث من Node.js (الذي يأتي مرفقًا بـ npm، وهو مدير حزم JavaScript).
- نموذج الرمز (سيتم تنزيله في الخطوة التالية)
- معرفة أساسية بلغة HTML وCSS وJavaScript
نسعى دائمًا إلى تحسين البرامج التعليمية. كيف تقيّم مستوى خبرتك في تطوير الويب؟
تنزيل تطبيق Codelab للمبتدئين
يوجد تطبيق إجراء التفعيل ضمن دليل material-components-web-codelabs-master/mdc-101/starter. احرص على cd في هذا الدليل قبل البدء.
...أو استنساخه من GitHub
لإنشاء نسخة طبق الأصل من هذا الدرس التطبيقي حول الترميز من GitHub، نفِّذ الأوامر التالية:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-101/starter
تثبيت تبعيات المشاريع
من دليل إجراء التفعيل، يمكنك تنفيذ ما يلي:
npm install
ستطّلع على الكثير من الأنشطة وفي النهاية، من المفترض أن تظهر شاشة التثبيت بنجاح:
إذا لم يحدث ذلك، عليك تشغيل npm audit fix.
تشغيل تطبيق إجراء التفعيل
في الدليل نفسه، شغِّل:
npm start
ستبدأ webpack-dev-server. وجِّه المتصفح إلى http://localhost:8080/ لعرض الصفحة.
نجحت عملية تسجيل الدخول. من المفترض أن يكون رمز البداية لصفحة تسجيل الدخول في Shrine' قيد التشغيل في متصفحك. من المفترض أن يظهر لك الاسم والمقوّس وشعار الضريح أسفله مباشرةً.
ألقِ نظرة على الرمز
البيانات الوصفية باللغة index.html
في دليل إجراء التفعيل، افتح index.html باستخدام أداة تعديل الرموز المفضّلة لديك. يجب أن يحتوي هذا الملف على:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>يتم هنا استخدام علامة <link> لتحميل ملف bundle-login.css الذي تم إنشاؤه بواسطة حزمة الويب، وتتضمن العلامة <script> الملف bundle-login.js. بالإضافة إلى ذلك، يتم تضمين normalize.css لعرضها بشكل متناسق على المتصفحات المختلفة، بالإضافة إلى الخط Roboto من Google Fonts.
الأنماط المخصّصة في login.scss
تم تصميم مكونات MDC على الويب باستخدام mdc-* فئات CSS، مثل الفئة mdc-text-field. (تتعامل MDC Web مع بنية DOM كجزء من واجهة برمجة التطبيقات المتاحة للجميع).
عمومًا، ننصحك بإجراء تعديلات على الأنماط في المكوّنات باستخدام صفوفك الخاصة. ربما تكون قد لاحظت بعض فئات CSS المخصّصة في رمز HTML أعلاه، مثل shrine-logo. ويتم تحديد هذه الأنماط في login.scss لإضافة أنماط أساسية إلى الصفحة.
افتح login.scss وستظهر لك الأنماط التالية لصفحة تسجيل الدخول:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}الآن بعد أن تعرّفت على رمز إجراء التفعيل، لنبدأ تنفيذ المكوِّن الأول.
للبدء، سنضيف حقلي نص إلى صفحة تسجيل الدخول، حيث سيتمكن الأشخاص من إدخال اسم المستخدم وكلمة المرور. وسنستخدم مكوّن حقل النص في MDC الذي يحتوي على وظيفة مضمّنة تعرض تصنيفًا عائمًا ونشطًا باللمس.
تثبيت الحقل النصي MDC
يتم نشر مكوّنات MDC على الويب من خلال حِزم NPM. لتثبيت الحزمة لمكوِّن حقل النص، شغِّل:
npm install @material/textfield
إضافة HTML
في index.html، أضِف ما يلي داخل العنصر <form> في نص الرسالة:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>تتكوّن بنية DOM Text Field DOM من عدة أجزاء:
- العنصر الرئيسي
mdc-text-field - العناصر الفرعية
mdc-text-field__inputوmdc-floating-labelوmdc-line-ripple
إضافة خدمة مقارنة الأسعار (CSS)
في login.scss، أضِف بيان الاستيراد التالي بعد الاستيراد الحالي:
@import "@material/textfield/mdc-text-field";في الملف نفسه، أضِف الأنماط التالية لمحاذاة حقول النص وتوسيطها:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}إضافة JavaScript
افتح login.js، وهو فارغ حاليًا. أضِف الرمز التالي لاستيراد حقول النص وإنشاء مثيل لها:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));إضافة التحقق من صحة HTML5
تعبّر "الحقول النصية" عن ما إذا كان إدخال الحقل صالحًا أو يحتوي على خطأ، وذلك باستخدام السمات التي تقدّمها واجهة برمجة التطبيقات للتحقّق من صحة HTML5's.
عليك إجراء ما يلي:
- أضِف السمة
requiredإلى عناصرmdc-text-field__inputلكل من الحقلين النصيين Username (اسم المستخدم) وPassword (كلمة المرور). - ضبط السمة
minlengthللعنصرmdc-text-field__inputلحقل النص Password على"8"
اضبط عنصرَي <div class="mdc-text-field"> بحيث يظهر كما يلي:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>أعِد تحميل الصفحة على http://localhost:8080/. من المفترض أن تظهر لك الآن صفحة بها حقلان نصيان لاسم المستخدم وكلمة المرور.
انقر على الحقول النصية للاطلاع على الرسوم المتحركة لتصنيف عائم والرسوم المتحركة المتموجة للخطوط (الخط الحد السفلي الذي يندفع للخارج):
بعد ذلك، سنضيف زرًّا إلى صفحة تسجيل الدخول: "إلغاء&&hl=ar;&&;;Next;" وسنستخدم مكوّن الزر MDC مع المكوّن MP داخل التردّد لإكمال مكوّن حبر التصميم المتعدد الأبعاد الشهير.
تثبيت زر MDC
لتثبيت الحزمة لمكوّن الزر، شغِّل:
npm install @material/button
إضافة HTML
في العلامة index.html، أضِف ما يلي أسفل علامة الإغلاق للعنصر <div class="mdc-text-field password">:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>بالنسبة إلى الزر "&&;;إلغاء&&;;&;;كوة خارجية"، إننا نستخدم نمط الزر التلقائي. ومع ذلك، يستخدِم الزر "&&;;التالي&;;;" نمط صيغة مرتفع، والذي يُشار إليه في الصف mdc-button--raised.
لمحاذاة العناصر بسهولة لاحقًا، يتم وضع عنصرَي mdc-button في عنصر <div>.
إضافة خدمة مقارنة الأسعار (CSS)
في login.scss، يمكنك إضافة بيان الاستيراد التالي بعد عمليات الاستيراد الحالية:
@import "@material/button/mdc-button";لمحاذاة الأزرار وإضافة هامش حولها، يمكنك إضافة الأنماط التالية إلى login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}إضافة موجة من الحبر إلى الأزرار
وعندما يلمس المستخدم أحد الأزرار أو ينقر عليه، فإنه يعرض ملاحظات وآراء على شكل أمواج. يتطلب مكوّن موجات الحبر JavaScript، لذلك سنضيفه إلى الصفحة.
لتثبيت الحزمة من أجل مكوّن الأمواج، شغِّل:
npm install @material/ripple
في أعلى login.js، أضِف بيان الاستيراد التالي:
import {MDCRipple} from '@material/ripple';لإنشاء مثيل من الأمواج، عليك إضافة ما يلي إلى login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));ونظرًا لعدم الحاجة إلى الاحتفاظ بمرجع للموجة المتموجة، فلن تحتاج إلى تعيين متغير.
أكملت هذه الخطوة. إعادة تحميل الصفحة سيتم عرض موجة حبر عند النقر على كل زر.
املأ حقول النص بقيم صالحة، ثم اضغط على الزر "التالي"؛. أحسنت! ستستمر في العمل على هذه الصفحة في MDC-102.
وباستخدام ترميز HTML الأساسي وبعض الأسطر الأخرى من CSS وJavaScript، تساعدك المكونات الأساسية لمكتبة الويب في إنشاء صفحة تسجيل دخول جميلة تتوافق مع إرشادات التصميم المتعدد الأبعاد، كما أنها تبدو وتعمل بشكل متسق مع جميع الأجهزة.
الخطوات التالية
تعدّ "النص النصي" و"الزر" و"التموج" ثلاثة مكوّنات أساسية في مكتبة MDC على الويب، إلا أن هناك العديد منها. يمكنك أيضًا استكشاف بقية المكوّنات في MDC على الويب.
يمكنك الانتقال إلى MDC-102: بنية التصميم المتعدد الأبعاد وتصميمه للتعرُّف على درج التنقُّل وقائمة الصور. نشكرك على تجربة مكونات المادة. نتمنى أن تكون قد استفدت من هذا الدرس التطبيقي حول الترميز.