مادة

تصميم المواد لتطبيقات AngularJS

التصميم متعدد الأبعاد عبارة عن مواصفات لنظام موحد للتصميم المرئي والحركي والتفاعلي الذي يتكيف عبر الأجهزة المختلفة. هدفنا هو تقديم مجموعة بسيطة وخفيفة الوزن من عناصر واجهة المستخدم الأصلية لـ AngularJS والتي تنفذ مواصفات تصميم المواد للاستخدام في تطبيقات AngularJS ذات الصفحة الواحدة (SPAs).

تعتبر مادة AngularJS تطبيقًا لمواصفات تصميم المواد من Google (2014-2017) لمطوري AngularJS (v1.x).

لتطبيق مواصفات تصميم المواد (2018+)، يرجى الاطلاع على مشروع Angular Material المصمم لمطوري Angular (v2+).

نهاية الحياة

انتهى الدعم المادي لـ AngularJS رسميًا اعتبارًا من يناير 2022. تعرف على معنى انتهاء الدعم واقرأ إعلان نهاية الحياة. تفضل بزيارة Material.angular.io للحصول على المادة Angular المدعومة بشكل نشط.

يمكنك العثور على تفاصيل حول الإبلاغ عن المشكلات الأمنية هنا.

تشتمل مادة AngularJS على مجموعة غنية من مكونات واجهة المستخدم القابلة لإعادة الاستخدام والتي تم اختبارها جيدًا ويمكن الوصول إليها.

روابط سريعة:

• واجهة برمجة التطبيقات والعروض التوضيحية
• مبنى
• التثبيت

يرجى ملاحظة أن استخدام أحدث إصدار من مادة AngularJS يتطلب استخدام AngularJS 1.7.2 أو أعلى.

تدعم مادة AngularJS إصدارات المتصفح المحددة في حقل browserslist في package.json الخاص بنا. اكتشف المزيد على موقع المستندات الخاص بنا.

تدعم مادة AngularJS إصدارات قارئ الشاشة المدرجة هنا.

التوثيق والعروض التوضيحية عبر الإنترنت

• تفضل بزيارة Material.angularjs.org عبر الإنترنت لمراجعة واجهة برمجة التطبيقات (API)، والاطلاع على المكونات قيد التنفيذ من خلال العروض التوضيحية المباشرة، ولقراءة أدلتنا التفصيلية التي تتضمن نظام التخطيط ونظام السمات والطباعة والمزيد.
• أو يمكنك إنشاء الوثائق والعروض التوضيحية محليًا؛ راجع إنشاء المستندات والعروض التوضيحية للحصول على التفاصيل.

مبنى

يمكن للمطورين إنشاء مادة AngularJS باستخدام NPM وgulp.

قم أولاً بتثبيت أو تحديث تبعيات npm لمشروعك المحلي:

npm install

تثبيت Gulp v3 عالميًا:

npm install -g gulp@3

ثم قم بتشغيل مهام gulp :

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

للتطوير، استخدم docs:watch البرنامج النصي NPM للتشغيل في وضع التطوير:

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

لمزيد من التفاصيل حول كيفية عمل عملية الإنشاء والأوامر الإضافية (المتاحة للاختبار وتصحيح الأخطاء)، يجب على المطورين قراءة دليل الإنشاء.

تثبيت الإصدار (ملفات التوزيع)

الآلية الوقائية الوطنية

للمطورين غير المهتمين ببناء مكتبة مواد AngularJS... استخدم NPM لتثبيت ملفات توزيع مواد AngularJS واستخدامها.

قم بالتغيير إلى الدليل الجذر لمشروعك.

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

مديري التبعية الآخرين

قم بزيارة مستودع التوزيع الخاص بنا للحصول على مزيد من التفاصيل حول كيفية تثبيت واستخدام ملفات توزيع المواد AngularJS داخل مشروعك المحلي.

CDN

تتوفر إصدارات CDN من مادة AngularJS.

باستخدام Google CDN، لن تحتاج إلى تنزيل نسخ محلية من ملفات التوزيع. بدلاً من ذلك، ما عليك سوى الرجوع إلى عناوين URL الخاصة بـ CDN لاستخدام ملفات المكتبة البعيدة هذه بسهولة. يعد هذا مفيدًا بشكل خاص عند استخدام الأدوات عبر الإنترنت مثل CodePen أو Plunker.

" style=";text-align:right;direction:rtl">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

يمكن للمطورين الذين يبحثون عن أحدث إصدارات البناء استخدام GitCDN.xyz للسحب مباشرة من مستودع التوزيع الخاص بنا:

" style=";text-align:right;direction:rtl">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

بمجرد تثبيت جميع الأصول الضرورية، أضف ngMaterial و ngMessages كتبعيات لتطبيقك:

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;