تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. مقدمة

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

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

التطبيق الذي ستصممه

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

مكونات 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

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

يستخدم MDC Web أداة معالجة مسبقة لتنسيق CSS تُعرف باسم Sass. إذا كنت تستخدم أداة معالجة CSS مختلفة (أو لا تستخدم أيًّا منها)، لا بأس بذلك. يمكنك استخدام Sass مع المعالج المتقدّم الحالي من خلال تثبيت sass CLI أو استخدام مكوّن إضافي (مثل sass-loader لاستخدام Webpack أو gulp-sass لاستخدام Gulp أو grunt-sass لاستخدام Grunt) في سلسلة أدوات الإنشاء.

لكي يعمل الرمز في المتصفّحات القديمة، مثل IE 11، نستخدم أداة تحويل تُسمى Babel لتحويل بنية JavaScript في MDC Web‏ ES2015 إلى بنية JavaScript في ES5.

سنستخدم webpack لتجميع ملفاتنا وتقديم موقعنا الإلكتروني محليًا. سبق أن تم ضبط إعدادات حزمة الويب لهذا المشروع في ملف webpack.config.js. لمزيد من التفاصيل حول كيفية إعداده، يمكنك الاطّلاع على دليل البدء.

تشغيل تطبيق إجراء التفعيل

في دليل إجراء التفعيل، شغِّل:

npm start

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

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

3- تعديل الزر

زر تثبيت "شركاء المحتوى في خرائط Google"

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

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

يعرض الزر الآن تأثير التموج الدقيق كملاحظات مرئية عند الضغط عليه.

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

يُغلِّف مكوّن MDC Select عنصر HTML <select> الأصلي. استخدِم هذا الرمز حيثما تستخدم عادةً <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'));

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

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

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

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

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

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

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

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

6- ملخّص

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

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

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

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

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

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

أوافق بشدة

أوافق

ليست دقيقة ولا غير دقيقة

لا أوافق

لا أوافق أبدًا

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

أوافق بشدة

أوافق

لا أوافق ولا أعارض

لا أوافق

لا أوافق أبدًا