1
00:00:03,650 --> 00:00:11,280
حان الوقت لمواصلة التمرين التالي حيث سنقوم بفحص المكونات مرة أخرى.

2
00:00:11,280 --> 00:00:15,600
سنقوم بتعديل القالب

3
00:00:15,600 --> 00:00:20,670
لمكون القائمة الذي قمنا بتضمينه بالفعل في تطبيق Angular الخاص بنا

4
00:00:20,670 --> 00:00:30,580
باستخدام نوع جديد من المكونات المادية لتخطيط قائمتنا بطريقة مختلفة.

5
00:00:30,580 --> 00:00:36,625
على طول الطريق، وسوف ننظر أيضا في استخدام التوجيه الهيكلي NGiF.

6
00:00:36,625 --> 00:00:40,790
الذهاب إلى ملف القالب الخاص بمكون القائمة لدينا،

7
00:00:40,790 --> 00:00:44,685
سأقوم بإجراء بعض التغييرات على ملف القالب هذا.

8
00:00:44,685 --> 00:00:47,900
أولاً، سأقوم بإضافة div آخر هنا

9
00:00:47,900 --> 00:00:56,170
مع FxFlex ثم أغلق هذا div هناك.

10
00:00:56,170 --> 00:01:01,245
لذلك، لاحظ أنه الآن داخل بلدي ديف الخارجي،

11
00:01:01,245 --> 00:01:03,050
لدي اثنين من divs هنا.

12
00:01:03,050 --> 00:01:07,855
لذا، واحد مع div والثاني مع القائمة الفارغة.

13
00:01:07,855 --> 00:01:15,880
لذلك، هذه هي قطعتين من المحتوى التي تحتاج إلى وضعها على الشاشة.

14
00:01:15,880 --> 00:01:19,450
ولكن لاحظ أنني قد حددت FxLayout لتكون ملونة.

15
00:01:19,450 --> 00:01:21,590
لذا، مما يعني أنه

16
00:01:21,590 --> 00:01:24,445
سيتم وضع هاتين القطعتين من المحتوى على رأس بعضها البعض،

17
00:01:24,445 --> 00:01:27,025
مكدسة واحدة فوق بعضها البعض.

18
00:01:27,025 --> 00:01:29,370
لذلك، في div الأول،

19
00:01:29,370 --> 00:01:32,330
سأقوم بتضمين القليل من المحتوى هنا.

20
00:01:32,330 --> 00:01:38,570
لذلك، سأضع قسم آخر في الداخل هنا.

21
00:01:38,570 --> 00:01:42,005
في وقت لاحق، وسوف أضيف المزيد في هذا ديف.

22
00:01:42,005 --> 00:01:50,625
ولكن في الوقت الحالي، سيكون لدي فقط h3 مع عنصر القائمة هناك،

23
00:01:50,625 --> 00:01:56,875
ومن ثم إضافة عنصر خط أفقي إلى هذه القائمة.

24
00:01:56,875 --> 00:02:02,780
لذا، سيعطي هذا العنوان

25
00:02:02,780 --> 00:02:08,900
لهذه الصفحة المعينة في الأعلى في طلبي عند تقديمه.

26
00:02:08,900 --> 00:02:12,395
لذلك، هذا هو تعديل واحد.

27
00:02:12,395 --> 00:02:14,070
الآن بالنسبة للجزء الثاني،

28
00:02:14,070 --> 00:02:16,435
بدلاً من استخدام عنصر قائمة الحصيرة،

29
00:02:16,435 --> 00:02:21,830
سآخذ الآن مساعدة قائمة شبكة الحصيرة.

30
00:02:21,830 --> 00:02:26,000
تسمح لي قائمة MAT-GRID بتخطيط المحتوى

31
00:02:26,000 --> 00:02:30,625
كشبكة من العناصر بدلاً من قائمة العناصر.

32
00:02:30,625 --> 00:02:38,220
رأينا كيف تم وضع القائمة مع قائمة العناصر في التمرين السابق.

33
00:02:38,220 --> 00:02:41,810
الآن، أود أن وضع نفس القائمة بطريقة مختلفة

34
00:02:41,810 --> 00:02:45,615
تخطيط أكثر جاذبية قليلا للقائمة.

35
00:02:45,615 --> 00:02:48,140
لذا، بدلاً من استخدام قائمة الحصيرة،

36
00:02:48,140 --> 00:02:52,520
سأقوم الآن بتغيير هذا من قائمة الحصيرة إلى قائمة شبكة الحصيرة.

37
00:02:52,520 --> 00:02:54,005
لذا، قبل أن أفعل ذلك،

38
00:02:54,005 --> 00:03:03,645
سأرفق هذا أيضًا داخل div آخر سأقوم بتطبيق FxFlex

39
00:03:03,645 --> 00:03:10,320
عليه هنا، بحيث تكون قائمة الشبكة الخاصة بها هناك.

40
00:03:10,320 --> 00:03:14,540
لذا، سيعطيني ذلك مزيدًا من المرونة لإضافة عناصر

41
00:03:14,540 --> 00:03:19,180
إلى هذه الوحدة المعينة إذا احتجت لاحقًا.

42
00:03:19,180 --> 00:03:23,505
تأخذ قائمة الشبكة الآن معلمة تسمى

43
00:03:23,505 --> 00:03:28,450
الأعمدة التي تحدد عدد الأعمدة التي يجب أن تحتوي عليها هذه الشبكة.

44
00:03:28,450 --> 00:03:35,540
الآن سأحدد الأعمدة كعمودين لأن لدي أربعة عناصر فقط في القائمة الخاصة بي.

45
00:03:35,540 --> 00:03:37,290
لذلك، عمودين كافيين بما فيه الكفاية.

46
00:03:37,290 --> 00:03:41,995
لذلك، على الأقل لدي صفين من الشبكة هناك.

47
00:03:41,995 --> 00:03:45,770
أيضا، هذا يأخذ معلمة أخرى تسمى

48
00:03:45,770 --> 00:03:50,010
Rowheight أو سمة تسمى Rowheight،

49
00:03:50,010 --> 00:03:56,650
والتي سأحدد أن تكون 200 بكسل هنا.

50
00:03:56,680 --> 00:04:03,630
لذلك، من شأنه أن يكمل قائمة الحصيرة التي لدي داخل ديف هناك.

51
00:04:03,630 --> 00:04:09,120
الآن، بمجرد أن أقوم بالتغيير، ثم داخل هذا،

52
00:04:09,120 --> 00:04:12,700
سأدخل واستخدم،

53
00:04:12,700 --> 00:04:15,045
بدلاً من عنصر قائمة الحصيرة،

54
00:04:15,045 --> 00:04:20,450
سيكون هذا الآن عبارة عن بلاط شبكة الحصيرة هنا.

55
00:04:20,450 --> 00:04:22,480
لذلك، البلاط الشبكة.

56
00:04:22,480 --> 00:04:24,580
في الأساس، والبلاط من الشبكة.

57
00:04:24,580 --> 00:04:27,350
هذا البلاط الشبكة، كما تدركون،

58
00:04:27,350 --> 00:04:31,200
أنا ذاهب إلى أن يكون تكرار على قائمة من الأطباق.

59
00:04:31,200 --> 00:04:35,090
لذلك، ما زلت أستخدم توجيه ngFor الخاص بي معه.

60
00:04:35,090 --> 00:04:38,510
هذه الحصيرة شبكة البلاط سوف يرفق الآن

61
00:04:38,510 --> 00:04:43,095
المحتوى الذي سيتم وضعه في كل البلاط من الشبكة بلدي هنا.

62
00:04:43,095 --> 00:04:45,320
الآن، داخل البلاط،

63
00:04:45,320 --> 00:04:49,105
وأنا ذاهب لاستخدام الصورة كما هي موجودة.

64
00:04:49,105 --> 00:04:53,990
لكنني سأستخدم الصورة،

65
00:04:53,990 --> 00:04:58,750
وليس مع MatlistavaTar لأنه لا يمكن تطبيقه هنا، وبدلاً من ذلك،

66
00:04:58,750 --> 00:05:04,720
سأحدد ارتفاع الصورة كـ 200 بكسل.

67
00:05:04,720 --> 00:05:09,230
لذلك، هذا يطابق ارتفاع الصف بحيث صورتي سوف تمتد

68
00:05:09,230 --> 00:05:14,325
كامل ارتفاع البلاط بلدي هناك.

69
00:05:14,325 --> 00:05:16,830
لذا،

70
00:05:16,830 --> 00:05:20,190
سيبقى ارتفاع الصورة، 200 بكسل، والمصدر و البديل على هذا النحو.

71
00:05:20,190 --> 00:05:22,745
ثم، الجزء التالي،

72
00:05:22,745 --> 00:05:24,830
بدلا من h1،

73
00:05:24,830 --> 00:05:27,110
وأنا ذاهب لتغيير هذا واحد

74
00:05:27,110 --> 00:05:33,880
لتكون

75
00:05:33,880 --> 00:05:39,710
محاطة داخل حصيرة شبكة البلاط تذييل.

76
00:05:41,780 --> 00:05:49,770
لذلك، أيا كان المحتوى داخل هنا سوف تظهر داخل الحصيرة شبكة البلاط تذييل هنا.

77
00:05:49,770 --> 00:05:54,035
الآن، داخل هناك يمكنني تحديد أي محتوى أريد.

78
00:05:54,035 --> 00:05:57,295
لذلك، بالنسبة للبلاط الشبكة،

79
00:05:57,295 --> 00:06:00,170
بالنظر إلى الوصف الكامل هو أكثر من اللازم.

80
00:06:00,170 --> 00:06:02,245
لذلك، أنا ذاهب لإزالة هذا الوصف،

81
00:06:02,245 --> 00:06:05,765
وبدلا من ذلك، فقط استخدام h1 هناك.

82
00:06:05,765 --> 00:06:12,355
الآن، بالإضافة إلى ذلك، أنا ذاهب إلى اتخاذ مساعدة من الأنابيب الزاوي هنا.

83
00:06:12,355 --> 00:06:16,340
الأنبوب الذي سأقوم بتطبيقه على هذا، كما ترون،

84
00:06:16,340 --> 00:06:22,095
الأنبوب هو الشريط الرأسي على لوحة المفاتيح.

85
00:06:22,095 --> 00:06:25,440
ثم، سأستخدم الأنبوب الكبير.

86
00:06:25,440 --> 00:06:27,175
إذن، ماذا يفعل هذا الأنبوب؟

87
00:06:27,175 --> 00:06:32,795
هذا الأنبوب، فإن أنبوب الأحرف الكبيرة تحويل اسم الطبق من

88
00:06:32,795 --> 00:06:39,015
كل ما هو عليه إلى كلمة كاملة مع أحرف كبيرة.

89
00:06:39,015 --> 00:06:42,215
لذا، مهما كان اسم الطبق سيتم تقديمه

90
00:06:42,215 --> 00:06:49,280
كأحرف كبيرة تمامًا عندما يتم عرضه على القالب هناك.

91
00:06:49,280 --> 00:06:52,800
لذلك، هذا هو استخدام أنبوب الزاوي هنا.

92
00:06:52,800 --> 00:06:56,870
لذلك، نحن ذاهبون لاستخدام المزيد من الأنابيب الزاوي ونحن نذهب على طول.

93
00:06:56,870 --> 00:07:05,205
هذا هو أول لقاء لنا مع واحدة من المدمج في الأنابيب الزاوي في هذه الدورة.

94
00:07:05,205 --> 00:07:10,400
لذلك، مع هذا، قمنا الآن بتعديل تخطيطنا

95
00:07:10,400 --> 00:07:15,670
لإظهار هذا div هنا ثم هذه القائمة الشبكة هنا.

96
00:07:15,670 --> 00:07:17,240
دعونا حفظ التغييرات.

97
00:07:17,240 --> 00:07:21,070
الذهاب الآن إلى ملف app.module.ts،

98
00:07:21,070 --> 00:07:24,640
نحن بحاجة إلى استيراد ماغريدليستمودول في هناك.

99
00:07:24,640 --> 00:07:27,660
لذلك، الذهاب إلى الأعلى هناك، سنقول،

100
00:07:27,660 --> 00:07:36,490
«استيراد ماغريدليستمودول من الزاوية/المادة/الشبكة/القائمة».

101
00:07:39,260 --> 00:07:42,055
بمجرد أن نضيف هذا،

102
00:07:42,055 --> 00:07:45,925
ثم سننزل إلى الواردات في الديكور،

103
00:07:45,925 --> 00:07:53,210
ومن ثم تضمين MatGridListModule في المدخلات.

104
00:07:53,210 --> 00:07:55,830
دعونا، مرة أخرى، حفظ التغييرات.

105
00:07:55,830 --> 00:08:01,650
دعونا نذهب ونلقي نظرة سريعة على صفحة الويب الخاصة بنا وما يبدو على الشاشة.

106
00:08:01,650 --> 00:08:03,730
الذهاب إلى صفحة الويب الخاصة بنا،

107
00:08:03,730 --> 00:08:09,125
يمكنك الآن أن ترى أن القائمة الخاصة بك وضعت الآن بطريقة مختلفة.

108
00:08:09,125 --> 00:08:13,590
على الرغم من ذلك، فإنه ليس حقا أن ننظر إلى هذه اللحظة.

109
00:08:13,590 --> 00:08:15,230
أنا لست مصمم،

110
00:08:15,230 --> 00:08:18,880
لذلك هذا أفضل ما يمكنني الحصول عليه منه.

111
00:08:18,880 --> 00:08:22,330
الآن، إذا كان لدي 20

112
00:08:22,330 --> 00:08:27,110
عنصرًا في قائمتي، فيمكنني وضع عناصر متعددة على كل صف وأعمدة متعددة

113
00:08:27,110 --> 00:08:31,860
، ثم

114
00:08:31,860 --> 00:08:35,660
يمكنني ضغط المساحة التي يشغلها كل عنصر، أو يمكنني زيادة حجم الصورة بحيث

115
00:08:35,660 --> 00:08:40,245
تحتل كل شيء حتى تبدو أكثر جاذبية على الشاشة.

116
00:08:40,245 --> 00:08:49,185
الآن، دعونا نلقي نظرة على هذا الشيء نفسه عندما يتم عرضه في شاشة أجهزة أصغر.

117
00:08:49,185 --> 00:08:52,400
لذلك، هذا هو المكان الذي سآخذ فيه مساعدة

118
00:08:52,400 --> 00:08:57,990
خيارات المطور في متصفح Chrome الخاص بي.

119
00:08:57,990 --> 00:09:01,175
لذلك، سأبدأ أدوات التطوير هنا.

120
00:09:01,175 --> 00:09:04,330
عندما يكون لدي أدوات التطوير هنا،

121
00:09:04,330 --> 00:09:08,340
يمكنك رؤية هذا الزر هنا قائلا، «تبديل شريط أدوات الجهاز».

122
00:09:08,340 --> 00:09:10,070
لذلك، اسمحوا لي تبديل مرة أخرى.

123
00:09:10,070 --> 00:09:16,180
ثم يمكنك رؤية نفس الصفحة التي يتم تقديمها على أحجام شاشة مختلفة.

124
00:09:16,180 --> 00:09:23,210
حتى هنا، ترى الصفحة التي يتم تقديمها في غالاكسي S5،

125
00:09:23,210 --> 00:09:27,030
وبعد ذلك نفس الشيء

126
00:09:28,090 --> 00:09:34,435
يمكنك أن ترى أنه يجري تقديمها في وضع أفقي.

127
00:09:34,435 --> 00:09:39,110
لذلك، يمكنك أن ترى أن هذا يسمح لي بعرض نفس الصفحة

128
00:09:39,110 --> 00:09:44,490
على أحجام الشاشة المختلفة باستخدام أدوات المطور المضمنة في Android.

129
00:09:44,490 --> 00:09:48,755
لذلك، دعونا نلقي نظرة على ما يبدو على اي فون.

130
00:09:48,755 --> 00:09:51,815
القائمة تبدو أكثر جاذبية هنا.

131
00:09:51,815 --> 00:09:55,220
هذا ما أود تحقيقه على الشاشة.

132
00:09:55,220 --> 00:10:02,155
إذا كانت صوري أكبر بكثير في الحجم حتى على شاشات أعلى دقة،

133
00:10:02,155 --> 00:10:06,045
فإن القائمة تبدو مثل هذا.

134
00:10:06,045 --> 00:10:11,205
في الوضع الأفقي، هذا ما سيبدو عليه.

135
00:10:11,205 --> 00:10:15,045
الآن، لاحظ أدوات مطوري البرامج هذه في Chrome.

136
00:10:15,045 --> 00:10:21,790
سنستخدم أدوات المطور لاحقًا عندما نستخدم Angular

137
00:10:21,790 --> 00:10:25,340
بمزيد من التفصيل لأننا نستطيع فحص أشياء مثل ما يمكن

138
00:10:25,340 --> 00:10:30,180
لـ Angular طباعته لنا على وحدة التحكم.

139
00:10:30,180 --> 00:10:36,650
ثم يمكننا حتى دراسة كيفية جلب أجزاء مختلفة من طلبنا.

140
00:10:36,650 --> 00:10:40,440
يمكننا أن ننظر إلى أداء الشبكة من التطبيق لدينا، وهلم جرا.

141
00:10:40,440 --> 00:10:45,110
لذا، هذا هو المكان الذي تكون فيه أدوات التطوير هذه

142
00:10:45,110 --> 00:10:47,270
مفيدة جدًا بالنسبة لنا.

143
00:10:47,270 --> 00:10:51,100
التبديل مرة أخرى إلى الطريقة العادية،

144
00:10:51,100 --> 00:10:56,790
وهذا هو ما تبدو عليه صفحة الويب لدينا على متصفح سطح المكتب القياسية.

145
00:10:56,790 --> 00:10:58,545
لم ننتهي بعد

146
00:10:58,545 --> 00:11:02,955
دعونا نعود إلى مكونات القائمة.

147
00:11:02,955 --> 00:11:07,200
ملف Typescript ثم هذه الأطباق التي قمت

148
00:11:07,200 --> 00:11:11,765
بتعريفها هنا بدلاً من الحفاظ على

149
00:11:11,765 --> 00:11:18,060
هذا داخل صفي، سأقوم بنقل هذه الأطباق إلى ثابت

150
00:11:18,060 --> 00:11:25,670
سأحدد هناك وسنسميها كأطباق const،

151
00:11:25,860 --> 00:11:31,370
وهذا سيكون من نوع طبق مجموعة،

152
00:11:31,370 --> 00:11:38,825
وبعد ذلك سوف أقطع هذه المجموعة الكاملة من الأطباق من هنا ثم حركها إلى هناك

153
00:11:38,825 --> 00:11:43,450
هذا في إطار التحضير لممارسة مستقبلية حيث لن نقوم

154
00:11:43,450 --> 00:11:50,050
بتضمين هذا النوع من البيانات في تطبيقنا،

155
00:11:50,050 --> 00:11:59,950
ولكن بدلاً من ذلك سنقوم بنقل هذا إلى خدمة.

156
00:11:59,950 --> 00:12:05,260
لذلك، ما قمت به هو قطع تلك المعلومات الأطباق ومن

157
00:12:05,260 --> 00:12:11,405
ثم وضعها في ثابت هنا مع اسم الأطباق في جميع العواصم هنا،

158
00:12:11,405 --> 00:12:16,100
وبعد ذلك الآن يتم ترك أطباقي كيتيم هنا.

159
00:12:16,100 --> 00:12:26,275
لذا، هذا أنا ذاهب لجعله يساوي الأطباق هنا.

160
00:12:26,275 --> 00:12:31,165
الآن، عليك أن تتساءل كيف لي إزالة هذا النوع من الأطباق.

161
00:12:31,165 --> 00:12:35,125
TypeScript ذكي بما فيه الكفاية ليدرك أنه عند القيام بذلك،

162
00:12:35,125 --> 00:12:40,360
فإنه سيتم تعيين نوع تلقائيا إلى الأطباق لمطابقة ما لديك في الأطباق.

163
00:12:40,360 --> 00:12:44,195
لذا، حتى إذا لم تكتبه في TypeScript، فستفعل ذلك،

164
00:12:44,195 --> 00:12:47,350
ولكن إذا كنت تريد أن تكون واضحًا تمامًا،

165
00:12:47,350 --> 00:12:50,925
فيمكنك القيام بذلك أيضًا وسيعمل ذلك على ما يرام.

166
00:12:50,925 --> 00:12:53,920
حسنا، إذا كنت تفضل هذا سوف يترك الأمر على هذا النحو.

167
00:12:53,920 --> 00:13:01,795
الآن، بالإضافة إلى ذلك، سأقوم بتقديم متغير آخر هنا يسمى SelectedDish.

168
00:13:01,795 --> 00:13:08,665
هذا المتغير أنا ذاهب إلى استخدام في هذا التمرين واحدة من التدريبات في وقت لاحق أيضا.

169
00:13:08,665 --> 00:13:17,875
لذلك، أنا ذاهب لجعل هذا يساوي الطبق الأول في صفيفتي.

170
00:13:17,875 --> 00:13:24,730
الآن، هذا المحدددسوف تكون مفيدة للجزء التالي من هذا التمرين.

171
00:13:24,730 --> 00:13:29,265
لذلك، دعونا حفظ التغييرات ومن ثم العودة إلى القالب لدينا.

172
00:13:29,265 --> 00:13:33,460
في القالب، ما سأقوم به هو أسفل القائمة مباشرة،

173
00:13:33,460 --> 00:13:39,825
سأقوم باستخدام عنصر بطاقة من المواد الزاوي

174
00:13:39,825 --> 00:13:46,555
لعرض هذا المحدددديش مباشرة أسفل القائمة هناك.

175
00:13:46,555 --> 00:13:50,700
الآن، على الرغم من أن هذه ليست أفضل طريقة للقيام بذلك،

176
00:13:50,700 --> 00:13:57,720
ولكن هذا أقوم به في التحضير للتمرين التالي فقط

177
00:13:57,720 --> 00:14:04,920
لتوضيح لك كيف يمكن استخدام عنصر بطاقة مادية لتطبيقنا.

178
00:14:04,920 --> 00:14:09,330
لذا، سأقوم باستخدام div مع flex flex هنا،

179
00:14:09,330 --> 00:14:12,710
ثم إلى هذا div سأقوم بإضافة في

180
00:14:12,710 --> 00:14:22,565
nGif مع selectedDish.

181
00:14:22,565 --> 00:14:28,045
لذا، لاحظ أنني أطبق NGif على هذا div هنا

182
00:14:28,045 --> 00:14:33,330
لتحديد أنه إذا كان selectedDish فارغًا حاليًا،

183
00:14:33,330 --> 00:14:37,535
فلن أقوم بإضافة هذا div إلى dom.

184
00:14:37,535 --> 00:14:38,920
إذا لم يكن كذلك،

185
00:14:38,920 --> 00:14:42,050
فسيتم إضافة هذا div إلى dom،

186
00:14:42,050 --> 00:14:48,485
وسيعرض عنصر البطاقة بالمحتوى في If.

187
00:14:48,485 --> 00:14:55,760
لذلك، أنا ذاهب لاستخدام عنصر بطاقة لعرض تفاصيل المحدددديش.

188
00:14:55,760 --> 00:14:57,290
لذلك، للقيام بذلك،

189
00:14:57,290 --> 00:15:02,870
وأنا استخدم بطاقة حصيرة هنا من بطاقة التصاميم المادية هنا.

190
00:15:02,870 --> 00:15:05,090
تحتوي بطاقة

191
00:15:05,090 --> 00:15:10,375
الحصيرة نفسها على جزء رأس بطاقة

192
00:15:10,375 --> 00:15:15,640
الحصيرة وأيضا مع رأس بطاقة الحصيرة،

193
00:15:15,640 --> 00:15:21,010
سيكون لها محتوى بطاقة الحصيرة.

194
00:15:21,010 --> 00:15:25,055
اسمحوا لي أن أغلق هذا المحتوى بطاقة الحصيرة.

195
00:15:25,055 --> 00:15:27,785
لذلك، في الرأس، ماذا أريد أن تظهر في الرأس؟

196
00:15:27,785 --> 00:15:31,725
في الرأس، أريد استخدام

197
00:15:31,725 --> 00:15:37,600
عنوان بطاقة مات-بطاقة لإظهار

198
00:15:37,600 --> 00:15:44,490
تفاصيل اسم المحدددديش هنا.

199
00:15:44,490 --> 00:15:53,755
لذلك، أود أن أذهب في وأقول h3 وإغلاق h3 وداخل هنا أنا ذاهب

200
00:15:53,755 --> 00:15:59,870
لاستخدام الاستيفاء ومن ثم أقول

201
00:16:00,240 --> 00:16:09,035
اسم محددDish والحروف الكبيرة الأنابيب.

202
00:16:09,035 --> 00:16:17,375
لذا، لاحظ كيف قمت بتضمين اسم المحدددديش باستخدام عنوان بطاقة الحصيرة.

203
00:16:17,375 --> 00:16:22,750
الآن، بالإضافة إلى ذلك، سأستخدم طريقة،

204
00:16:23,720 --> 00:16:33,930
واحدة تسمى الصورة التي تأخذ سمة تسمى صورة بطاقة الحصيرة

205
00:16:33,930 --> 00:16:43,630
وسيكون المصدر كما كنت متوقعًا،

206
00:16:43,630 --> 00:16:49,270
يجب تحديدDish.Image

207
00:16:49,270 --> 00:16:54,310
ثم البديل الذي

208
00:16:54,310 --> 00:17:01,640
سأعطيه كما محددDish.Name.

209
00:17:03,450 --> 00:17:11,790
لذلك، هذه ستكون الصورة التي سيتم تضمينها في بطاقتي هنا.

210
00:17:11,790 --> 00:17:13,905
لذا، في المحتوى،

211
00:17:13,905 --> 00:17:27,640
سأقوم بتضمين وصف محددDish،

212
00:17:31,680 --> 00:17:36,105
ثم مع المحتوى هنا،

213
00:17:36,105 --> 00:17:41,860
يمكنني أيضًا إضافة بعض الأزرار إلى أسفل البطاقة.

214
00:17:41,860 --> 00:17:54,445
لذلك، سأستخدم إجراءات بطاقة الحصيرة هنا وداخل

215
00:17:54,445 --> 00:17:58,585
هناك يمكنني تضمين زر.

216
00:17:58,585 --> 00:18:06,550
لذلك، ترى أن هذا هو استخدام زر

217
00:18:06,550 --> 00:18:14,210
في طلبي، اثنين من الأزرار.

218
00:18:16,130 --> 00:18:20,040
لاحظ استخدام هذا الزر حصيرة هنا.

219
00:18:20,040 --> 00:18:26,360
لذا، سيؤدي هذا إلى تحويل هذا الزر إلى تصميم مادي مثل الزر هنا،

220
00:18:26,360 --> 00:18:30,725
وهكذا، سيظهر هذان الزران في الجزء السفلي من بطاقتي هنا.

221
00:18:30,725 --> 00:18:35,065
لذلك، مع هذا، لقد أضفت في تفاصيل المحدددديش.

222
00:18:35,065 --> 00:18:36,980
هناك سبب لي للقيام بذلك.

223
00:18:36,980 --> 00:18:40,910
أنا أريك كيف يمكنك عرض التفاصيل في بطاقة،

224
00:18:40,910 --> 00:18:45,435
حسنا، هذا في التحضير لمهمتك الأولى.

225
00:18:45,435 --> 00:18:52,700
لذلك، يمكنك أن ترى كيف يمكننا استخدام بطاقة تصميم المواد في قالب لدينا هنا.

226
00:18:52,700 --> 00:18:59,565
الذهاب إلى @module .ts، نحن بحاجة إلى استيراد البطاقة ووحدة الزر.

227
00:18:59,565 --> 00:19:07,390
لذلك، صعودا إلى الأعلى سنقول استيراد ماتكاردمودول من

228
00:19:07,390 --> 00:19:13,555
بطاقة المواد الزاوي

229
00:19:13,555 --> 00:19:23,150
واستيراد ماتوتونمودول من زر المواد الزاوي.

230
00:19:23,700 --> 00:19:27,280
الآن بعد أن أضفنا هذين إلى الأعلى،

231
00:19:27,280 --> 00:19:31,389
دعنا نذهب إلى الديكور، وفي

232
00:19:31,389 --> 00:19:40,580
الواردات دعنا نضيف في MatCardModule و MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
لذلك، دعونا حفظ التغييرات ومن ثم نلقي نظرة سريعة على صفحة الويب لدينا.

234
00:19:46,945 --> 00:19:50,535
إلقاء نظرة على تطبيقنا الزاوي في المتصفح،

235
00:19:50,535 --> 00:19:54,690
ترى الآن أن لدينا القائمة التي يتم عرضها

236
00:19:54,690 --> 00:20:00,255
هنا ثم في الجزء السفلي لدينا الآن عنصر بطاقة.

237
00:20:00,255 --> 00:20:06,090
لذلك، يمكنك ان ترى عنصر البطاقة هنا مع العنوان هناك والصورة هناك.

238
00:20:06,090 --> 00:20:09,770
بالطبع، تبدو الصورة مروعة لأنها

239
00:20:09,770 --> 00:20:12,990
حجم الصورة الفعلي الذي أعطيته لك

240
00:20:12,990 --> 00:20:17,130
صغير جدًا وتم توسيعه لملء الشاشة بأكملها.

241
00:20:17,130 --> 00:20:20,075
إنظر إلى الأسفل هنا لذلك، هذا

242
00:20:20,075 --> 00:20:24,625
يحتوي على وصف الصورة ثم اثنين من الأزرار هنا،

243
00:20:24,625 --> 00:20:26,020
الحق أسفل هنا.

244
00:20:26,020 --> 00:20:35,990
لذلك، هذه هي الطريقة التي أنماط زر حصيرة الأزرار في قالب الزاوي،

245
00:20:35,990 --> 00:20:37,395
بحيث يكون لديك مثل وزر المشاركة.

246
00:20:37,395 --> 00:20:39,070
بالطبع، هم لا يفعلون أي شيء،

247
00:20:39,070 --> 00:20:43,695
ولكن لاحظ التصميم المادي مثل السلوك هناك.

248
00:20:43,695 --> 00:20:45,070
لذلك، عند النقر على الزر،

249
00:20:45,070 --> 00:20:48,100
يمكنك رؤية التموجات التي تمر بها.

250
00:20:48,100 --> 00:20:52,440
لذلك، هذا هو السبب في أنني قررت استخدام

251
00:20:52,440 --> 00:21:04,260
وحدة المواد الزاوي لتصميم القوالب في هذه الدورة.

252
00:21:04,260 --> 00:21:07,700
لذلك، إلقاء نظرة على جهاز أصغر،

253
00:21:07,700 --> 00:21:11,960
يبدو أكثر جاذبية على جهاز أصغر.

254
00:21:11,960 --> 00:21:16,000
لذلك، يمكنك أن ترى أن التقديم أفضل بكثير على جهاز أصغر،

255
00:21:16,000 --> 00:21:19,715
يمكنك أن ترى أنه على الشاشة يمكنك أن ترى

256
00:21:19,715 --> 00:21:27,245
البطاقة هناك تظهر التفاصيل والزرين هناك،

257
00:21:27,245 --> 00:21:29,750
مثل وزر المشاركة،

258
00:21:29,750 --> 00:21:34,190
وتفاصيل الطبق.

259
00:21:37,080 --> 00:21:40,650
لذلك، هذا يكمل هذا التمرين.

260
00:21:40,650 --> 00:21:42,170
لذلك، في هذا التمرين،

261
00:21:42,170 --> 00:21:49,800
قمنا بفحص استخدام قائمة الشبكة

262
00:21:49,800 --> 00:22:00,030
ومكونات تصميم مواد البطاقة لتصميم القالب لمكون القائمة لدينا.

263
00:22:00,030 --> 00:22:05,720
قد يكون هذا هو الوقت المناسب لك للقيام بتعليق جيد مع الرسالة،

264
00:22:05,720 --> 00:22:09,620
مكونات Angular الجزء الثاني.