ما هي المادة الزاوية وكيفية تنفيذها؟

تُعرف مكونات UI / UX في Angular باسم المواد الزاويّة. هممساعدة تطبيقات Angular في الأداء بكفاءة . ومع ذلك ، إذا لم تكن على علم بها بعد ، فإليك مقالًا لمساعدتك في تعلم المواد الزاويّة بالتفصيل. أيضا ، رo احصل على معرفة متعمقة بـ Angular ، ففكر في التسجيل فيها ' من Edureka.

في هذا المقال سوف أتطرق إلى الموضوعات التالية:

• مقدمة في المواد الزاويّة
• تركيب المواد الزاوي
• مكونات المواد الزاوي
  • التنقل
    1. شريط الأدوات
    2. قائمة طعام
  • ضوابط النموذج
    1. حقل النموذج
    2. زر الراديو
• مادة الزاوي CDK
  • حقل النص

مقدمة في المواد الزاويّة

المواد كلغة تصميم تم تطويرها بواسطة Google في عام 2014. تصميم المواد هي أداةلأطر الواجهة الأمامية ، مما يساعدك في المرئية و اقتراح و و التفاعل التصميم. كما أنه يساعدك على التكيف عبر الأجهزة المختلفة وأحجام الشاشات المختلفة. أولاً ، تم وضع علامة عليه لـ AngularJS لجعل هذه التطبيقات أكثر ملفت للانتباه وأداء أسرع . بعد ذلك ، أعادت Google كتابة الرمز بالكامل من البداية وأزلت JS ie ، وأطلق عليها في سبتمبر 2016. في وقت لاحق ، وضع Google علامة على التصميم متعدد الأبعاد إلى Angular ، والذي يستخدم ، وأطلقوا عليها اسم Angular Materials.

المواد الزاويّة أو تساعدك مكونات واجهة المستخدم (UI) على تصميم التطبيق الخاص بك في ملف منظم بطريقة. يجذبون المستخدمين ويجعلونه أسهل للوصول العناصر أو المكونات الموجودة في التطبيق الخاص بك. كما أنها تساعد في تصميم تطبيقاتك بطريقة جذابة وفريدة من نوعها الأنماط و الأشكال . تساعد هذه المكونات في جعل تطبيقك أكثر ثابتة و بسرعة و متعدد الجوانب والاستعمالات وحتى التصميم متجاوب المواقع.

تركيب المواد الزاوي

الآن ، لنبدأ ببرنامج تعليمي سريع حول كيفية تثبيت Angular Materials. أول الأشياء أولاً ، تأكد من تثبيت Angular في نظامك. إذا لم تكن معتادًا على Angular ، فارجع إلى الرابط الموجود على . بمجرد الانتهاء من إعداد كل شيء ، يمكنك إضافة Angular Materials إلى مشروعك باستخدام الأمر التالي:

إضافة @ الزاوي / المادة

أولاً ، سيطلب منك اختيار اسم موضوع تم إنشاؤه مسبقًا أو سمة مخصصة.

تحتاج إلى اختيار السمة 'نيلي / وردي' التي تم إنشاؤها مسبقًا وهي السمة الافتراضية لتصميم تطبيقك. يمكنك أيضًا اختيار السمة 'المخصصة' بحيث يمكنك تخصيص ملفات السمات التي تتضمن جميع الأنماط الشائعة.

بعد ذلك ، سيطلب منك الإعداد المطرقة . HammerJS هي مكتبة شائعة ، تستخدم بشكل رئيسي في تطبيق Angular. يضيف دعمًا لإيماءات اللمس مثل Swipe و Pan و Pinch و Rotate وغيرها الكثير ، خاصة في تطبيقات الهاتف المحمول.

يمكنك اختيار 'نعم' أو 'لا'. يمكن أن يكون HammerJS مفيدًا عند استخدام تطبيقك على الهواتف المحمولة. نظرًا لأن الهواتف المحمولة تقدم شاشات تعمل باللمس ، فإن هذه الإيماءات أكثر فائدة وقد تبدو عصرية في تطبيق الهاتف المحمول الخاص بك.

بعد أن تختار اختيارك ، سيطلب منك بعد ذلك الإعداد الرسوم المتحركة للمتصفح للمواد الزاوي.

تحتاج إلى اختيار 'نعم' حتى تتمكن من استخدام الرسوم المتحركة في تطبيقك. تجعل Angular Animations تطبيقك أكثر متعة وأسهل في الاستخدام. يمكن أن يؤدي ذلك إلى تحسين تطبيقك وتجربة المستخدم التي تجذب انتباه المستخدمين.

بعد ذلك ، سيؤدي هذا إلى تثبيت Angular Materials في تطبيقك.

مكونات المواد الزاوي

كما ذكرنا سابقًا ، فإن مكونات المواد الزاويّة ليست سوى UI / UX مكونات التصميم. أنها تحتوي على مجموعة متنوعة من المكونات مثل عناصر التحكم في النموذج والتنقل والأزرار والمؤشرات والنوافذ المنبثقة وغيرها الكثير. تساعدك هذه المكونات في تنفيذ الأنماط وفقًا لمواصفات تصميم المواد.

للمضي قدمًا ، دعنا نرى بعض الأمثلة حول كيفية تنفيذ هذه المكونات في تطبيق Angular الخاص بك.

التنقل

أولاً ، سأناقش المكونات في التنقل.

• شريط الأدوات

تحتاج إلى كتابة الكود التالي في ملف app.component.html ملف لاستخدام مكون شريط الأدوات في تطبيقك.

 دروس المواد الزاوي 

عبارة عن حاوية من مادة Angular تُستخدم للرؤوس والعناوين. لون يمكن تغيير الحاوية باستخدام اللون خاصية.بشكل افتراضي ، تستخدم أشرطة الأدوات لون خلفية محايدًا استنادًا إلى النسق الحالي ، أي إما فاتح أو داكن.يمكنك اختيار ثلاثة موضوعات افتراضية وهي: 'ابتدائي' و 'لهجة' أو 'تحذير' .لاستخدام شريط الأدوات هذا ، يجب عليك أولاً استيراده بتنسيق app.module.ts ملف من المواد الزاوي باستخدام الأمر التالي:

استيراد {MatToolbarModule} من '@ angular / material'

في وقت لاحق ، تحتاج أيضًا إلى إضافة هذه الوحدة في ملف الواردات: [] قسم يقع في app.module.ts ملف.

الواردات: [BrowserModule ، AppRoutingModule ، BrowserAnimationsModule ، MatToolbarModule] ،

بالنسبة لشريط أدوات Mat ، تحتاج إلى إضافة ' MatToolbar '.

الآن ، دعنا نخدم مشروعك باستخدام الأمر التالي:

من يخدم -o

سيؤدي هذا إلى فتح مشروعك على المتصفح الافتراضي لنظامك كما هو موضح أدناه:

إذا كنت ترغب في تغيير لون شريط الأدوات حسب اختيارك ، فيمكنك القيام بذلك بمساعدة ورقة أنماط CSS. دعني اريك مثالا.

أولا ، تحتاج إلى محو اللون ممتلكات من الحاوية ثم اكتب ما يلي CSS كود في app.component.css ملف.

شريط أدوات mat {background-color: / * color-of-your-choice * / color: / * text-color * /}

الآن ، اخدم مشروعك لترى النتيجة.

• قائمة طعام

بعد ذلك ، سأناقش مكون القائمة. تحتاج إلى كتابة الكود التالي في ملف app.component.html ملف.

 دروس المواد الزاوي تعليمات إعدادات القائمة

دعونا نضيف بعض التصميم على قائمة طعام زر. تحتاج إلى كتابة الكود التالي في ملف app.component.css ملف.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}

class = 'space' يستخدم لإضافة تباعد بين 'اسم شريط الأدوات' و 'خيار القائمة'.

في حال لم تكن معتادًا على ورقة أنماط CSS ، يمكنك الرجوع إلى مدونتنا على للحصول على التفاصيل.

تمامًا مثل شريط الأدوات ، لاستخدامه و حاويات ، عليك اتباع نفس الإجراءات المذكورة أعلاه ، للاستيراد MatMenu الوحدة و MatButtonModule من عند مادة الزاوي وأضفهم الواردات: [] قسم يقع في app.module.ts ملف.

قم بخدمة مشروعك الآن لعرض المخرجات.

ضوابط النموذج

الآن ، سأناقش المكونات في التحكم في النموذج.

• حقل النموذج

كما يوحي الاسم ، يتم استخدام Form-Field للمدخلات التي يقدمها المستخدم. هو الأكثر شيوعًا لتسجيل المستخدم ، في تطبيق أو موقع ويب.

تحتاج إلى كتابة الكود التالي في ملف app.component.html ملف لاستخدام مكون حقل النموذج في التطبيق الخاص بك.

 
ضوابط النموذج
اسم

كالعادة ، تحتاج إلى الاستيراد MatFormFieldModule و MatInputModule وأضفهم الواردات: [] قسم يقع في app.module.ts ملف. يتم استخدام الكود أعلاه بشكل عام لإدخال الأسماء مثل 'الاسم الأول' و 'اسم العائلة' وما إلى ذلك. يمكنك حتى استخدام المدققين وجعل الحقل إلزاميًا. على سبيل المثال ، يمكنك استخدامه لحقل البريد الإلكتروني. يمكنك إخفاء أو إظهار نص كلمات المرور. للرجوع اليها ، تحقق من الكود أدناه:

أدخل بريدك الإلكتروني {{getErrorMessage ()}} أدخل كلمة المرور {{إخفاء؟ 'visibility_off': 'visibility'}}

في الخاص بك app.component.css ملف ، تحتاج إلى إضافة الكود التالي:

.example-container {padding-left: 50px}

الآن ، في ملف app.component.ts ملف ، تحتاج إلى استيراد FormControl و المدققون من عند @ الزاوي / الأشكال الدليل.

استيراد {FormControl، Validators} من '@ angular / Forms'

تحتاج حتى إلى إضافة النص لعرض خطأ داخل الفصل التالي.

تصدير فئة AppComponent {email = new FormControl (''، [Validators.required، Validators.email]) getErrorMessage () {return this.email.hasError ('required')؟ 'يجب عليك إدخال قيمة': this.email.hasError ('بريد إلكتروني')؟ 'ليس بريدًا إلكترونيًا صالحًا': ''} إخفاء = صحيح}

بالإشارة إلى الإجراء أعلاه ، تحتاج إلى كتابة الكود التالي في ملف app.module.ts ملف لاستيراد الوحدات الضرورية.

استيراد {FormsModule، ReactiveFormsModule} من استيراد '@ angular / Forms' {MatIconModule} من '@ angular / material'

في وقت لاحق ، تحتاج إلى إضافة هذه الوحدات الواردات: [] الجزء.

• زر الراديو

تُستخدم أزرار الراديو بشكل عام لاختيار الاختيار من بين الخيارات المختلفة. يمكنك التحقق من الكود التالي كمرجع.

إلى عن على app.component.html ملف،

 
جنس
الذكور الإناث

إلى عن على app.component.css ملف،

زر الاختيار mat {Padding-left: 50px}

الآن ، تحتاج إلى الاستيراد وحدة MatRadio وإضافته الواردات: [] قسم يقع في app.module.ts ملف.

في وقت لاحق ، تحتاج إلى خدمة مشروعك لعرض المخرجات.

للمضي قدمًا ، سوف أناقش Angular Material CDK.

مادة الزاوي CDK

CDK ، المعروف أيضًا باسم مجموعة تطوير المكونات ، هي مكتبة سلوكيات محددة مسبقًا في Angular Material ، وهي مجموعة من الأدوات التي تنفذ بشكل مشترك أنماط التفاعل و ميزات التطبيق . ليس لديها أي تصميم خاص بالتصميم متعدد الأبعاد. دعونا نرى مثالا على CDK.

• حقل النص

يوفر مكون حقل النص أدوات مساعدة للعمل مع حقول إدخال النص. يمكنك استخدام مكونات CDK في حقل النص لتغيير حجم المدخلات. دعونا نرى مثالا على كيفية تنفيذه.

إلى عن على app.component.html ملف،

 
مادة الزاوي CDK
حجم الخط 10 بكسل 12 بكسل 14 بكسل 16 بكسل 18 بكسل 20 بكسل حجم النص تلقائيًا

بالنسبة إلى app.component.ts الملف ، فأنت بحاجة إلى استيراد المكونات الضرورية أولاً.

استيراد {CdkTextareaAutosize} من '@ angular / cdk / text-field' import {NgZone، ViewChild} من '@ angular / core' import {take} من 'rxjs / clients'

الآن ، تحتاج إلى كتابة الكود التالي داخل الفصل.

ما هو الفرق بين فئة الملخص والواجهة

تصدير فئة AppComponent {constructor (private _ngZone: NgZone) {}ViewChild ('autosize'، {static: false}) الحجم التلقائي: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe ((( ) = & ampampampgt this.autosize.resizeToFitContent (صحيح))}}

بعد ذلك ، تحتاج إلى الاستيراد MatSelectModule وإضافته الواردات: [] قسم يقع في app.module.ts ملف.

أخيرًا ، تحتاج إلى خدمة مشروعك لعرض المخرجات.

ليس هذا هو الاستنتاج وهناك العديد من المكونات الأخرى في المواد الزاويّة. يمكنك الرجوع إليهم من الموقع الرسمي من مادة الزاوي.

بهذا ، أود إنهاء مدونتي. آمل أن تكون واضحًا بشأن أساسيات المادة الزاوية.إذا كانت لديك أي شكوك أو استفسارات بخصوص هذه المقالة ، فلا تتردد في نشرها في قسم التعليقات أدناه.

إذا كنت ترغب في معرفة كل ما تعلمته للتو من هذه المدونة والمزيد حول الزاوي ، ووجه حياتك المهنية نحو مطور Angular محترف ، ثم فكر في التسجيل لدينا ' .

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'Angular Material' وسنعاود الاتصال بك في أقرب وقت ممكن.