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

1. مقدمة

logo_components_color_2x_web_96dp.png

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

تُعد المكونات المادية للويب (MDC Web) غير مرتبطة بإطار العمل، مُنشأة باستخدام JavaScript عادي. ويساعد ذلك في تسهيل عمل MDC Web بسلاسة أثناء عملية التطوير. يمكن تثبيت هذه المكونات حسب الحاجة للمساعدة في إجراء تحسينات على التصميم المرن في تطبيقك الحالي.

ما الذي ستنشئه

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

c33f9d1388feca74.png

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

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

المتطلبات

  • إصدار حديث من 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> أصلي بتنسيق HTML. ويمكنك استخدامه في المكان الذي تستخدم فيه <select> عادةً. سنعدّل حقل "الولاية".

تثبيت وحدة عقدة MDC

اضغط على 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>

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

<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 Select قائمة بالخيارات المتاحة للمستخدم بتنسيق مألوف، ولكن بأسلوب عصري.

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

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

تثبيت وحدة عقدة MDC

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

npm install @material/textfield
npm start

إضافة خدمة مقارنة الأسعار (CSS)

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

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

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

في index.html، ابحث عن العنصر <input> في حقل "Name". استبدِل الفئة 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 على الويب.

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

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

أوافق بشدة أوافق ليست دقيقة ولا غير دقيقة لا أوافق لا أوافق أبدًا

أود مواصلة استخدام Material Components في المستقبل

أوافق بشدة أوافق ليست دقيقة ولا غير دقيقة لا أوافق لا أوافق أبدًا