حان الوقت لمواصلة التمرين التالي حيث سنقوم بفحص المكونات مرة أخرى.
سنقوم بتعديل القالب
لمكون القائمة الذي قمنا بتضمينه بالفعل في تطبيق Angular الخاص بنا
باستخدام نوع جديد من المكونات المادية لتخطيط قائمتنا بطريقة مختلفة.
على طول الطريق، وسوف ننظر أيضا في استخدام التوجيه الهيكلي NGiF.
الذهاب إلى ملف القالب الخاص بمكون القائمة لدينا،
سأقوم بإجراء بعض التغييرات على ملف القالب هذا.
أولاً، سأقوم بإضافة div آخر هنا
مع FxFlex ثم أغلق هذا div هناك.
لذلك، لاحظ أنه الآن داخل بلدي ديف الخارجي،
لدي اثنين من divs هنا.
لذا، واحد مع div والثاني مع القائمة الفارغة.
لذلك، هذه هي قطعتين من المحتوى التي تحتاج إلى وضعها على الشاشة.
ولكن لاحظ أنني قد حددت FxLayout لتكون ملونة.
لذا، مما يعني أنه
سيتم وضع هاتين القطعتين من المحتوى على رأس بعضها البعض،
مكدسة واحدة فوق بعضها البعض.
لذلك، في div الأول،
سأقوم بتضمين القليل من المحتوى هنا.
لذلك، سأضع قسم آخر في الداخل هنا.
في وقت لاحق، وسوف أضيف المزيد في هذا ديف.
ولكن في الوقت الحالي، سيكون لدي فقط h3 مع عنصر القائمة هناك،
ومن ثم إضافة عنصر خط أفقي إلى هذه القائمة.
لذا، سيعطي هذا العنوان
لهذه الصفحة المعينة في الأعلى في طلبي عند تقديمه.
لذلك، هذا هو تعديل واحد.
الآن بالنسبة للجزء الثاني،
بدلاً من استخدام عنصر قائمة الحصيرة،
سآخذ الآن مساعدة قائمة شبكة الحصيرة.
تسمح لي قائمة MAT-GRID بتخطيط المحتوى
كشبكة من العناصر بدلاً من قائمة العناصر.
رأينا كيف تم وضع القائمة مع قائمة العناصر في التمرين السابق.
الآن، أود أن وضع نفس القائمة بطريقة مختلفة
تخطيط أكثر جاذبية قليلا للقائمة.
لذا، بدلاً من استخدام قائمة الحصيرة،
سأقوم الآن بتغيير هذا من قائمة الحصيرة إلى قائمة شبكة الحصيرة.
لذا، قبل أن أفعل ذلك،
سأرفق هذا أيضًا داخل div آخر سأقوم بتطبيق FxFlex
عليه هنا، بحيث تكون قائمة الشبكة الخاصة بها هناك.
لذا، سيعطيني ذلك مزيدًا من المرونة لإضافة عناصر
إلى هذه الوحدة المعينة إذا احتجت لاحقًا.
تأخذ قائمة الشبكة الآن معلمة تسمى
الأعمدة التي تحدد عدد الأعمدة التي يجب أن تحتوي عليها هذه الشبكة.
الآن سأحدد الأعمدة كعمودين لأن لدي أربعة عناصر فقط في القائمة الخاصة بي.
لذلك، عمودين كافيين بما فيه الكفاية.
لذلك، على الأقل لدي صفين من الشبكة هناك.
أيضا، هذا يأخذ معلمة أخرى تسمى
Rowheight أو سمة تسمى Rowheight،
والتي سأحدد أن تكون 200 بكسل هنا.
لذلك، من شأنه أن يكمل قائمة الحصيرة التي لدي داخل ديف هناك.
الآن، بمجرد أن أقوم بالتغيير، ثم داخل هذا،
سأدخل واستخدم،
بدلاً من عنصر قائمة الحصيرة،
سيكون هذا الآن عبارة عن بلاط شبكة الحصيرة هنا.
لذلك، البلاط الشبكة.
في الأساس، والبلاط من الشبكة.
هذا البلاط الشبكة، كما تدركون،
أنا ذاهب إلى أن يكون تكرار على قائمة من الأطباق.
لذلك، ما زلت أستخدم توجيه ngFor الخاص بي معه.
هذه الحصيرة شبكة البلاط سوف يرفق الآن
المحتوى الذي سيتم وضعه في كل البلاط من الشبكة بلدي هنا.
الآن، داخل البلاط،
وأنا ذاهب لاستخدام الصورة كما هي موجودة.
لكنني سأستخدم الصورة،
وليس مع MatlistavaTar لأنه لا يمكن تطبيقه هنا، وبدلاً من ذلك،
سأحدد ارتفاع الصورة كـ 200 بكسل.
لذلك، هذا يطابق ارتفاع الصف بحيث صورتي سوف تمتد
كامل ارتفاع البلاط بلدي هناك.
لذا،
سيبقى ارتفاع الصورة، 200 بكسل، والمصدر و البديل على هذا النحو.
ثم، الجزء التالي،
بدلا من h1،
وأنا ذاهب لتغيير هذا واحد
لتكون
محاطة داخل حصيرة شبكة البلاط تذييل.
لذلك، أيا كان المحتوى داخل هنا سوف تظهر داخل الحصيرة شبكة البلاط تذييل هنا.
الآن، داخل هناك يمكنني تحديد أي محتوى أريد.
لذلك، بالنسبة للبلاط الشبكة،
بالنظر إلى الوصف الكامل هو أكثر من اللازم.
لذلك، أنا ذاهب لإزالة هذا الوصف،
وبدلا من ذلك، فقط استخدام h1 هناك.
الآن، بالإضافة إلى ذلك، أنا ذاهب إلى اتخاذ مساعدة من الأنابيب الزاوي هنا.
الأنبوب الذي سأقوم بتطبيقه على هذا، كما ترون،
الأنبوب هو الشريط الرأسي على لوحة المفاتيح.
ثم، سأستخدم الأنبوب الكبير.
إذن، ماذا يفعل هذا الأنبوب؟
هذا الأنبوب، فإن أنبوب الأحرف الكبيرة تحويل اسم الطبق من
كل ما هو عليه إلى كلمة كاملة مع أحرف كبيرة.
لذا، مهما كان اسم الطبق سيتم تقديمه
كأحرف كبيرة تمامًا عندما يتم عرضه على القالب هناك.
لذلك، هذا هو استخدام أنبوب الزاوي هنا.
لذلك، نحن ذاهبون لاستخدام المزيد من الأنابيب الزاوي ونحن نذهب على طول.
هذا هو أول لقاء لنا مع واحدة من المدمج في الأنابيب الزاوي في هذه الدورة.
لذلك، مع هذا، قمنا الآن بتعديل تخطيطنا
لإظهار هذا div هنا ثم هذه القائمة الشبكة هنا.
دعونا حفظ التغييرات.
الذهاب الآن إلى ملف app.module.ts،
نحن بحاجة إلى استيراد ماغريدليستمودول في هناك.
لذلك، الذهاب إلى الأعلى هناك، سنقول،
«استيراد ماغريدليستمودول من الزاوية/المادة/الشبكة/القائمة».
بمجرد أن نضيف هذا،
ثم سننزل إلى الواردات في الديكور،
ومن ثم تضمين MatGridListModule في المدخلات.
دعونا، مرة أخرى، حفظ التغييرات.
دعونا نذهب ونلقي نظرة سريعة على صفحة الويب الخاصة بنا وما يبدو على الشاشة.
الذهاب إلى صفحة الويب الخاصة بنا،
يمكنك الآن أن ترى أن القائمة الخاصة بك وضعت الآن بطريقة مختلفة.
على الرغم من ذلك، فإنه ليس حقا أن ننظر إلى هذه اللحظة.
أنا لست مصمم،
لذلك هذا أفضل ما يمكنني الحصول عليه منه.
الآن، إذا كان لدي 20
عنصرًا في قائمتي، فيمكنني وضع عناصر متعددة على كل صف وأعمدة متعددة
، ثم
يمكنني ضغط المساحة التي يشغلها كل عنصر، أو يمكنني زيادة حجم الصورة بحيث
تحتل كل شيء حتى تبدو أكثر جاذبية على الشاشة.
الآن، دعونا نلقي نظرة على هذا الشيء نفسه عندما يتم عرضه في شاشة أجهزة أصغر.
لذلك، هذا هو المكان الذي سآخذ فيه مساعدة
خيارات المطور في متصفح Chrome الخاص بي.
لذلك، سأبدأ أدوات التطوير هنا.
عندما يكون لدي أدوات التطوير هنا،
يمكنك رؤية هذا الزر هنا قائلا، «تبديل شريط أدوات الجهاز».
لذلك، اسمحوا لي تبديل مرة أخرى.
ثم يمكنك رؤية نفس الصفحة التي يتم تقديمها على أحجام شاشة مختلفة.
حتى هنا، ترى الصفحة التي يتم تقديمها في غالاكسي S5،
وبعد ذلك نفس الشيء
يمكنك أن ترى أنه يجري تقديمها في وضع أفقي.
لذلك، يمكنك أن ترى أن هذا يسمح لي بعرض نفس الصفحة
على أحجام الشاشة المختلفة باستخدام أدوات المطور المضمنة في Android.
لذلك، دعونا نلقي نظرة على ما يبدو على اي فون.
القائمة تبدو أكثر جاذبية هنا.
هذا ما أود تحقيقه على الشاشة.
إذا كانت صوري أكبر بكثير في الحجم حتى على شاشات أعلى دقة،
فإن القائمة تبدو مثل هذا.
في الوضع الأفقي، هذا ما سيبدو عليه.
الآن، لاحظ أدوات مطوري البرامج هذه في Chrome.
سنستخدم أدوات المطور لاحقًا عندما نستخدم Angular
بمزيد من التفصيل لأننا نستطيع فحص أشياء مثل ما يمكن
لـ Angular طباعته لنا على وحدة التحكم.
ثم يمكننا حتى دراسة كيفية جلب أجزاء مختلفة من طلبنا.
يمكننا أن ننظر إلى أداء الشبكة من التطبيق لدينا، وهلم جرا.
لذا، هذا هو المكان الذي تكون فيه أدوات التطوير هذه
مفيدة جدًا بالنسبة لنا.
التبديل مرة أخرى إلى الطريقة العادية،
وهذا هو ما تبدو عليه صفحة الويب لدينا على متصفح سطح المكتب القياسية.
لم ننتهي بعد
دعونا نعود إلى مكونات القائمة.
ملف Typescript ثم هذه الأطباق التي قمت
بتعريفها هنا بدلاً من الحفاظ على
هذا داخل صفي، سأقوم بنقل هذه الأطباق إلى ثابت
سأحدد هناك وسنسميها كأطباق const،
وهذا سيكون من نوع طبق مجموعة،
وبعد ذلك سوف أقطع هذه المجموعة الكاملة من الأطباق من هنا ثم حركها إلى هناك
هذا في إطار التحضير لممارسة مستقبلية حيث لن نقوم
بتضمين هذا النوع من البيانات في تطبيقنا،
ولكن بدلاً من ذلك سنقوم بنقل هذا إلى خدمة.
لذلك، ما قمت به هو قطع تلك المعلومات الأطباق ومن
ثم وضعها في ثابت هنا مع اسم الأطباق في جميع العواصم هنا،
وبعد ذلك الآن يتم ترك أطباقي كيتيم هنا.
لذا، هذا أنا ذاهب لجعله يساوي الأطباق هنا.
الآن، عليك أن تتساءل كيف لي إزالة هذا النوع من الأطباق.
TypeScript ذكي بما فيه الكفاية ليدرك أنه عند القيام بذلك،
فإنه سيتم تعيين نوع تلقائيا إلى الأطباق لمطابقة ما لديك في الأطباق.
لذا، حتى إذا لم تكتبه في TypeScript، فستفعل ذلك،
ولكن إذا كنت تريد أن تكون واضحًا تمامًا،
فيمكنك القيام بذلك أيضًا وسيعمل ذلك على ما يرام.
حسنا، إذا كنت تفضل هذا سوف يترك الأمر على هذا النحو.
الآن، بالإضافة إلى ذلك، سأقوم بتقديم متغير آخر هنا يسمى SelectedDish.
هذا المتغير أنا ذاهب إلى استخدام في هذا التمرين واحدة من التدريبات في وقت لاحق أيضا.
لذلك، أنا ذاهب لجعل هذا يساوي الطبق الأول في صفيفتي.
الآن، هذا المحدددسوف تكون مفيدة للجزء التالي من هذا التمرين.
لذلك، دعونا حفظ التغييرات ومن ثم العودة إلى القالب لدينا.
في القالب، ما سأقوم به هو أسفل القائمة مباشرة،
سأقوم باستخدام عنصر بطاقة من المواد الزاوي
لعرض هذا المحدددديش مباشرة أسفل القائمة هناك.
الآن، على الرغم من أن هذه ليست أفضل طريقة للقيام بذلك،
ولكن هذا أقوم به في التحضير للتمرين التالي فقط
لتوضيح لك كيف يمكن استخدام عنصر بطاقة مادية لتطبيقنا.
لذا، سأقوم باستخدام div مع flex flex هنا،
ثم إلى هذا div سأقوم بإضافة في
nGif مع selectedDish.
لذا، لاحظ أنني أطبق NGif على هذا div هنا
لتحديد أنه إذا كان selectedDish فارغًا حاليًا،
فلن أقوم بإضافة هذا div إلى dom.
إذا لم يكن كذلك،
فسيتم إضافة هذا div إلى dom،
وسيعرض عنصر البطاقة بالمحتوى في If.
لذلك، أنا ذاهب لاستخدام عنصر بطاقة لعرض تفاصيل المحدددديش.
لذلك، للقيام بذلك،
وأنا استخدم بطاقة حصيرة هنا من بطاقة التصاميم المادية هنا.
تحتوي بطاقة
الحصيرة نفسها على جزء رأس بطاقة
الحصيرة وأيضا مع رأس بطاقة الحصيرة،
سيكون لها محتوى بطاقة الحصيرة.
اسمحوا لي أن أغلق هذا المحتوى بطاقة الحصيرة.
لذلك، في الرأس، ماذا أريد أن تظهر في الرأس؟
في الرأس، أريد استخدام
عنوان بطاقة مات-بطاقة لإظهار
تفاصيل اسم المحدددديش هنا.
لذلك، أود أن أذهب في وأقول h3 وإغلاق h3 وداخل هنا أنا ذاهب
لاستخدام الاستيفاء ومن ثم أقول
اسم محددDish والحروف الكبيرة الأنابيب.
لذا، لاحظ كيف قمت بتضمين اسم المحدددديش باستخدام عنوان بطاقة الحصيرة.
الآن، بالإضافة إلى ذلك، سأستخدم طريقة،
واحدة تسمى الصورة التي تأخذ سمة تسمى صورة بطاقة الحصيرة
وسيكون المصدر كما كنت متوقعًا،
يجب تحديدDish.Image
ثم البديل الذي
سأعطيه كما محددDish.Name.
لذلك، هذه ستكون الصورة التي سيتم تضمينها في بطاقتي هنا.
لذا، في المحتوى،
سأقوم بتضمين وصف محددDish،
ثم مع المحتوى هنا،
يمكنني أيضًا إضافة بعض الأزرار إلى أسفل البطاقة.
لذلك، سأستخدم إجراءات بطاقة الحصيرة هنا وداخل
هناك يمكنني تضمين زر.
لذلك، ترى أن هذا هو استخدام زر
في طلبي، اثنين من الأزرار.
لاحظ استخدام هذا الزر حصيرة هنا.
لذا، سيؤدي هذا إلى تحويل هذا الزر إلى تصميم مادي مثل الزر هنا،
وهكذا، سيظهر هذان الزران في الجزء السفلي من بطاقتي هنا.
لذلك، مع هذا، لقد أضفت في تفاصيل المحدددديش.
هناك سبب لي للقيام بذلك.
أنا أريك كيف يمكنك عرض التفاصيل في بطاقة،
حسنا، هذا في التحضير لمهمتك الأولى.
لذلك، يمكنك أن ترى كيف يمكننا استخدام بطاقة تصميم المواد في قالب لدينا هنا.
الذهاب إلى @module .ts، نحن بحاجة إلى استيراد البطاقة ووحدة الزر.
لذلك، صعودا إلى الأعلى سنقول استيراد ماتكاردمودول من
بطاقة المواد الزاوي
واستيراد ماتوتونمودول من زر المواد الزاوي.
الآن بعد أن أضفنا هذين إلى الأعلى،
دعنا نذهب إلى الديكور، وفي
الواردات دعنا نضيف في MatCardModule و MatPatternModule.
لذلك، دعونا حفظ التغييرات ومن ثم نلقي نظرة سريعة على صفحة الويب لدينا.
إلقاء نظرة على تطبيقنا الزاوي في المتصفح،
ترى الآن أن لدينا القائمة التي يتم عرضها
هنا ثم في الجزء السفلي لدينا الآن عنصر بطاقة.
لذلك، يمكنك ان ترى عنصر البطاقة هنا مع العنوان هناك والصورة هناك.
بالطبع، تبدو الصورة مروعة لأنها
حجم الصورة الفعلي الذي أعطيته لك
صغير جدًا وتم توسيعه لملء الشاشة بأكملها.
إنظر إلى الأسفل هنا لذلك، هذا
يحتوي على وصف الصورة ثم اثنين من الأزرار هنا،
الحق أسفل هنا.
لذلك، هذه هي الطريقة التي أنماط زر حصيرة الأزرار في قالب الزاوي،
بحيث يكون لديك مثل وزر المشاركة.
بالطبع، هم لا يفعلون أي شيء،
ولكن لاحظ التصميم المادي مثل السلوك هناك.
لذلك، عند النقر على الزر،
يمكنك رؤية التموجات التي تمر بها.
لذلك، هذا هو السبب في أنني قررت استخدام
وحدة المواد الزاوي لتصميم القوالب في هذه الدورة.
لذلك، إلقاء نظرة على جهاز أصغر،
يبدو أكثر جاذبية على جهاز أصغر.
لذلك، يمكنك أن ترى أن التقديم أفضل بكثير على جهاز أصغر،
يمكنك أن ترى أنه على الشاشة يمكنك أن ترى
البطاقة هناك تظهر التفاصيل والزرين هناك،
مثل وزر المشاركة،
وتفاصيل الطبق.
لذلك، هذا يكمل هذا التمرين.
لذلك، في هذا التمرين،
قمنا بفحص استخدام قائمة الشبكة
ومكونات تصميم مواد البطاقة لتصميم القالب لمكون القائمة لدينا.
قد يكون هذا هو الوقت المناسب لك للقيام بتعليق جيد مع الرسالة،
مكونات Angular الجزء الثاني.