ماتريال ديزاين لايت mdl

Material Design Lite

هي مكتبة متكاملة لإضافة مظهر بتصميم ماتريال ديزاين إلى مواقع الويب الخاصة بك. لا تعتمد على أي أطر JavaScript وتهدف إلى التحسين للاستخدام مواقع عبر الأجهزة ، وتجاوبها بشكل رائع في المتصفحات القديمة ، يمكنك إستخدامها و سنحاول ان نحول هدا تدويتة إلى دليل إستخدام لمكتبة Material design lite

طريقة حصول على مكتبة css وجافا سكريبت mdl

لدى mdl عدة طرق لتضمبن هده المكتبة و هي كأتي

بتضمين ملفات Lite CSS و JavaScript في كل صفحة HTML في مشروعك

فقط أضف عناصر <link> و <script> التالية في صفحات HTML (بتنسيق 27 كيلوبايت)

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

باستخدام الملفات المستضافة على CDN

تنزيل مكتبة mdl لاستضافتها بنفسك

يمكنك أيضًا تخصيص وتنزيل هده مكتبة لاستضافتها بنفسك
قم بتنزيل CSS و Javascript المصغرين (بحجم 27 كيلو بايت):

قم بتنزيل مكتبة mdl

MDL V1.3.0

ارجع إلى هذه الملفات عن طريق إضافة عناصر <link> و <script> إلى صفحات HTML الخاصة بك وقم أيضًا بتضمين رموز التالية :

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

إنشائه من الكود المصدر github

كود المصدر material design lite مستضافة على github. ستحتاج إلى تنزيل الرمز وإستدعاءه .

قم بتشغيل الأوامر التالية في shell:

# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp

ستجد ملف مكتبة Material Design Lite في مجلد dist. أنسخها في المشروع الخاص بك.

ثم ارجع إلى هذه الملفات عن طريق إضافة عنصر <link> و <script> إلى صفحات HTML الخاصة بك وقم أيضًا بتضمين خط رموز التالي :

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

تتثبت مكتبة mdl بإستخدام أوامر bower

قم بتثبيت ملفات Material Design Lite في مشروعك الذي يدعم Bower بإتباع خطوات التالية :

قم بتشغيل الأمر التالي في shell:

bower install material-design-lite --save

سيؤدي ذلك إلى تثبيت ملفات مكتبة Material Design Lite في مجلد bower_components لمشروعك.

ارجع إلى هذه الملفات عن طريق إضافة عنصر <link> و <script> إلى صفحات HTML الخاصة بك وقم أيضًا بتضمين رموز التالية:

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

تتثبت مكتبة mdl بإستخدام أوامر npm

قم بتثبيت ملفات Material Design Lite في مشروعك الذي يدعم Bower بإتباع خطوات التالية :

قم بتشغيل الأمر التالي في shell:

npm install material-design-lite --save

سيؤدي ذلك إلى تثبيت ملفات مكتبة Material Design Lite في مجلد node_modules لمشروعك.

ارجع إلى هذه الملفات عن طريق إضافة عنصر <link> و <script> إلى صفحات HTML الخاصة بك وقم أيضًا بتضمين رموز التالية:

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ملحوظة:
إذا كنت ترغب في تخصيص نظام الألوانMDL ، يستحسن إستخدام مكتبات CDN المستضافة أو القابلة للتنزيل. بتتمكن ، من استخدم أداة التخصيص والمعاينة الخاصة ب mdl

ها أنت ذا 😊! أنت الآن جاهز لإضافة مكونات MDL على موقعك.

طريقة إستخدام مكونات mdl

ستجد أسفله أمثلة من أزرار MDL: زر مع تموجات وزر FAB. ما عليك سوى نسخ ولصق كود المصدر المقابلة في <body> لصفحة HTML لمشروعك وستظهر العناصر كما هو موضح في المعاينة.(طبعا بعد إستدعاء مكتبة كما شرحنا أعلاه)

See the Pen Material Design Lite components demo by mnajiri (@mnajiri) on CodePen.

Raised button

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>

See the Pen Material Design Lite components demo by mnajiri (@mnajiri) on CodePen.

Colored FAB

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

يمكن تعديل عناصر MDL وتكوينها عن طريق إضافة فئات CSS. على سبيل المثال ، ستؤدي إضافة
mdl-js-ripple-effect إلى زر MDL إلى إضافة تأثير Ripple عند النقر فوق الزر وإضافة
mdl-button--fab سوف يغير نمط الزر إلى زر FAB.

كما أن هناك العديد من العناصر الأخرى المتاحة مثل البطاقات ، الجداول ، القوائم وغيرها سنضيفها قريبا ...

القواعد والمبادئ العامة Material design lite

بشكل عام ، اتبع هذه الخطوات الأساسية لاستخدام مكون MDL في صفحة HTML الخاصة بك:

ابدأ باستخدام عنصر HTML قياسي ، مثل <button> أو <div> أو <ul> ، اعتمادًا على مكون MDL الذي تريد استخدامه.

أضف واحدًا أو أكثر من فئات CSS الخاصة بـ MDL ،مثل

mdl-button أو mdl-tabs__panel ،

تذكر دائما تضمين علامة meta viewport حتى في هاتف للحصول على تجاوب مع جميع أجهزة

<meta name="viewport" content="width=device-width, initial-scale=1.0">

استخدم MDL على مواقع الويب ديناميكية

يقوم Material Design Lite بتسجيل وتقديم جميع العناصر المميزة بفئات MDL تلقائيًا عند تحميل الصفحة. ومع ذلك ، في حالة إنشاء عناصر DOM بشكل ديناميكي ، تحتاج إلى تسجيل عناصر جديدة باستخدام وظيفة


upgradeElement

.

في ما يلي كيفية إنشاء نفس الزر المرفوع ديناميكيًا مع تموجات تظهر في القسم أعلاه:

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

ما هي مسؤوليات MDL؟

جدير بذكر تم تصميم Material Design Lite لتوفير مجموعة أساسية من مكونات وقوالب تصميم لمواقع الويب. لا يهدف المشروع إلى توفير هياكل لإنشاء جميع احتياجات UX الممكنة ، ولكن لتوفير تنفيذ تصميم يمكنك البناء عليه. حتى داخل التصميم نفسه ، بطاقات على وجه التحديد ، فإنه لا يعقل توفير كل مجموعة بطريقة سلسة. عندما تعثر على شيء غير متوفر ، مثل القائمة المنسدلة ، فقد تحتاج إلى ترميز خاص الخاص بك.

أفضل مكتبة أكواد css و js جاهزة (bootstrap)

ماذا بعد؟

سننشر في قريب العاجل إرشادات مفصلة لاستخدام المكونات ، بما في ذلك فئات MDL وتأثيراتها، في صفحة html. كما سنضيف قوالب جاهزة تستخدم عناصر MDL .

شركنا برأيك 🤣🤣

المصدر : mdl

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام

المثبت