MDC-111 Web: دمج مكونات المواد في قاعدة التعليمات البرمجية (الويب)

1. مقدمة

logo_components_color_2x_web_96dp.png

تساعد Material Components (MDC) المطوّرين في تنفيذ التصميم المتعدد الأبعاد. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter.material.io/develop

‫Material Components for the web (MDC Web) هي مكتبة مستقلة عن إطار العمل، وتم إنشاؤها باستخدام JavaScript العادية. يساعد ذلك في ضمان عمل MDC Web بسلاسة مع عملية التطوير. ويمكن تثبيت هذه المكوّنات حسب الحاجة للمساعدة في إجراء تحسينات مرنة على التصميم في تطبيقك الحالي.

ما ستنشئه

في هذه الدراسة التطبيقية حول الترميز، ستستبدل بعض المكوّنات الحالية في نموذج بالمكوّنات التي توفّرها MDC Web:

c33f9d1388feca74.png

مكوّنات MDC Web في هذا الدرس التطبيقي حول الترميز

  • زرّ
  • اختيار
  • حقل نصي

المتطلبات

  • إصدار حديث من Node.js (الذي يأتي مجمّعًا مع npm، وهي أداة لإدارة حِزم JavaScript)
  • نموذج الرمز البرمجي (سيتم تنزيله في الخطوة التالية)
  • معرفة أساسية بلغات HTML وCSS وJavaScript

ما هو تقييمك لمستوى خبرتك في تطوير الويب؟

مبتدئ متوسط متقدّم

2. إعداد بيئة التطوير

تنزيل تطبيق الدرس التطبيقي الأوّلي

يقع تطبيق البداية في دليل material-components-web-codelabs-master/mdc-111/starter. احرص على cd في هذا الدليل قبل البدء.

...أو استنسِخه من GitHub

لاستنساخ هذا الدرس التطبيقي من GitHub، شغِّل الأوامر التالية:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-111/starter

تثبيت التبعيات الخاصة بالمشروع

من دليل التطبيق الأوّلي (material-components-web-codelabs/mdc-111/starter)، نفِّذ ما يلي:

npm install

ستلاحظ الكثير من الأنشطة، وفي النهاية، من المفترض أن تعرض لك نافذة الأوامر رسالة تفيد بنجاح عملية التثبيت:

bb3a822c020c9287.png

تشغيل تطبيق المبتدئين

في دليل التطبيق الأوّلي، نفِّذ ما يلي:

npm start

سيبدأ webpack-dev-server. انتقِل بمتصفّحك إلى http://localhost:8080/ للاطّلاع على الصفحة.

aa9263b15ae4f8d8.png

اكتمال النقل بنجاح من المفترض أن يظهر لك نموذج عنوان الشحن الخاص بالتطبيق:

8f60906e660b695e.png

3- تعديل الزر

تثبيت زر MDC

اضغط على Ctrl+C لإيقاف خادم التطوير. بعد ذلك، ثبِّت حزمة NPM الخاصة بـ "زر MDC" وأعِد تشغيل الخادم:

npm install @material/button
npm start

استيراد CSS

في أعلى _theme.scss، احذفوا كتلة .crane-button { ... } وأضيفوا ما يلي بدلاً منها:

$mdc-theme-primary: $crane-primary-color;

@import "@material/button/mdc-button";

تعديل الترميز

في index.html، أزِل الفئة crane-button من العنصر <button>، وأضِف الفئتين mdc-button وmdc-button--raised، ثم ضع التصنيف داخل العنصر <span> مع الفئة mdc-button__label:

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

إضافة التموج

يمكن استخدام أزرار MDC بدون JavaScript. ومع ذلك، تؤدي إضافة تموّج تفاعلي إلى الزر إلى توفير تجربة مستخدم أكثر ثراءً.

اضغط على Ctrl+C لإيقاف خادم التطوير. بعد ذلك، استخدِم الأمر التالي:

npm install @material/ripple
npm start

أضِف عبارة الاستيراد التالية إلى أعلى app.js:

import {MDCRipple} from '@material/ripple';

لإنشاء تأثير التموّج على الزر، أضِف ما يلي إلى أسفل app.js:

new MDCRipple(document.querySelector('.mdc-button'));

استيراد خط Roboto

تستخدم Material Design تلقائيًا الخط Roboto لأنواع الخطوط في المكوّنات.

في index.html، استورِد خط Roboto Web عن طريق إضافة ما يلي إلى عنصر <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

أعِد تحميل الصفحة، ومن المفترض أن يظهر لك ما يلي:

9be8eb813b02eada.gif

يعرض الزر الآن تأثيرًا بسيطًا على شكل تموّجات كملاحظات مرئية عند الضغط عليه.

4. تعديل عنصر الاختيار

يغلّف مكوّن MDC Select عنصر <select> أصليًا في HTML. استخدِمها في أي مكان تستخدم فيه عادةً <select>. لنعدّل حقل "الولاية".

تثبيت وحدة MDC Node

اضغط على Ctrl+C لإيقاف خادم التطوير. بعد ذلك، استخدِم الأمر التالي:

npm install @material/select
npm start

استيراد CSS

أضِف ما يلي إلى _theme.scss، بعد استيراد الزر مباشرةً:

@import "@material/select/mdc-select";

تعديل الترميز

ابحث عن العنصر <select> في index.html. استبدِل الفئة crane-input بالفئة mdc-select__native-control:

<select class="mdc-select__native-control" id="crane-state-input" required>

أضِف الترميز التالي لسهم القائمة المنسدلة لمكوّن MDC Select مباشرةً فوق العلامة <select>:

<i class="mdc-select__dropdown-icon"></i>

أسفل علامة الإغلاق </select> مباشرةً، استبدِل الفئة crane-label بالفئة mdc-floating-label:

<label class="mdc-floating-label" for="crane-state-input">

بعد ذلك، أضِف الترميز التالي مباشرةً بعد التصنيف:

<div class="mdc-line-ripple"></div>

أخيرًا، أضِف العلامات التالية حول العنصر <select> (ولكن داخل العنصر crane-field):

<div class="mdc-select">
  ...
</div>

يجب أن يبدو الترميز الناتج على النحو التالي:

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

استيراد ملف JavaScript

أضِف عبارة الاستيراد التالية إلى أعلى app.js:

import {MDCSelect} from '@material/select';

لإنشاء مثيل لعنصر الاختيار، أضِف ما يلي إلى أسفل app.js:

new MDCSelect(document.querySelector('.mdc-select'));

أعِد تحميل الصفحة، التي من المفترض أن تبدو الآن على النحو التالي:

20fa4104564f8195.gif

يعرض مكوّن "اختيار MDC" قائمة بالخيارات للمستخدم بتنسيق مألوف، ولكن بأسلوب عصري.

5- تعديل الحقول النصية

تتفوّق حقول النص في التصميم المتعدد الأبعاد بشكل كبير على عناصر <input> العادية من حيث سهولة الاستخدام. وهي مصمَّمة بحيث يسهل التعرّف عليها ضمن المحتوى المعقّد، كما تعرض ملاحظات مرئية بسيطة عندما يتفاعل المستخدم معها.

تثبيت وحدة MDC Node

اضغط على Ctrl+C لإيقاف خادم التطوير. بعد ذلك، استخدِم الأمر التالي:

npm install @material/textfield
npm start

إضافة CSS

أضِف ما يلي إلى _theme.scss، بعد عملية الاستيراد مباشرةً:

@import "@material/textfield/mdc-text-field";

تعديل الترميز

في index.html، ابحث عن العنصر <input> للحقل "الاسم". استبدِل الفئة crane-input بالفئة mdc-text-field__input:

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

بعد ذلك، استبدِل الفئة crane-label بالفئة mdc-floating-label:

<label class="mdc-floating-label" for="crane-name-input">

بعد ذلك، أضِف الترميز التالي مباشرةً بعد التصنيف:

<div class="mdc-line-ripple"></div>

أخيرًا، ضع العناصر الثلاثة كلها بين العلامتين التاليتين:

<div class="mdc-text-field">
  ...
</div>

يجب أن يبدو الترميز الناتج على النحو التالي:

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

كرِّر الإجراء نفسه لجميع عناصر <input> الأخرى على الصفحة.

يجب أن يبدو ترميز الحقول "العنوان" و"المدينة" و "الرمز البريدي" على النحو التالي:

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

يمكنك الآن إزالة النمطَين .crane-label و.crane-input من _theme.scss، إذ لم يعودا مستخدَمَين.

استيراد ملف JavaScript

أضِف عبارة الاستيراد التالية إلى أعلى app.js:

import {MDCTextField} from '@material/textfield';

لإنشاء مثيل لحقول النص، أضِف ما يلي إلى أسفل app.js:

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

أعِد تحميل الصفحة، التي من المفترض أن تبدو الآن على النحو التالي:

c33f9d1388feca74.png

تم الآن تعديل جميع حقول النص لاستخدام تخصيص التصميم المتعدد الأبعاد.

6. ملخّص

لقد استبدلت بعض المكوّنات الشائعة (حقول النص وقائمة الاختيار والزر) بدون إعادة تصميم تطبيقك بالكامل. أحسنت!

تشمل المكوّنات الأخرى التي يمكن أن تُحدث فرقًا كبيرًا أيضًا شريط التطبيق العلوي وقائمة التنقّل.

الخطوات التالية

يمكنك استكشاف المزيد من المكوّنات في MDC Web من خلال الانتقال إلى كتالوج MDC Web.

إذا كنت مهتمًا باستخدام MDC Web مع إطار عمل معيّن، انتقِل إلى MDC-112: دمج MDC مع أُطر عمل الويب.

تمكّنتُ من إكمال هذا الدرس التطبيقي حول الترميز خلال فترة زمنية معقولة وبجهد معقول

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا

أريد مواصلة استخدام "مكوّنات Material" في المستقبل

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا