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
компонента меню, который мы уже включили в наше угловое приложение

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
Итак, обратите внимание, что теперь внутри моего внешнего div,

11
00:01:01,245 --> 00:01:03,050
у меня есть два div здесь.

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
Итак, я поставлю еще один div здесь.

21
00:01:38,570 --> 00:01:42,005
Позже я добавлю больше в этот div.

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
вместо того, чтобы использовать mat-list-item,

29
00:02:16,435 --> 00:02:21,830
Я собираюсь теперь взять помощь mat-grid-list.

30
00:02:21,830 --> 00:02:26,000
Mat-grid-list позволяет мне размещать содержимое как

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
Итак, вместо использования mat-list,

36
00:02:48,140 --> 00:02:52,520
я собираюсь теперь изменить это из mat-list на mat-grid-list.

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
, чтобы mat-grid-list был сам там.

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
columns, который определяет, сколько столбцов должна содержать эта сетка.

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
Итак, это завершит список mat-grid-, который у меня есть внутри div.

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
Таким образом, высота изображения, 200 пикселей,

70
00:05:16,830 --> 00:05:20,190
и источник и альт останутся таковыми.

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
Таким образом, независимо от содержания здесь будет появляться внутри нижнего колонтитула mat-grid-tile-footer здесь.

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
нам нужно импортировать MatGridListModule там.

99
00:07:24,640 --> 00:07:27,660
Итак, идя наверх там, мы скажем

100
00:07:27,660 --> 00:07:36,490
«Импорт MatGridListModule из угловой/материала/сетки/списка».

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
Итак, здесь вы видите страницу, отображаемую в Galaxy 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
Итак, давайте посмотрим, как это выглядит на iPhone.

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
более подробно, потому что мы можем изучить такие вещи, как Angular

138
00:10:25,340 --> 00:10:30,180
может напечатать для нас на консоли.

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
и это будет типа блюдо массив,

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
отобразить этот selectedDish прямо под меню там.

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 с fx 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 в настоящее время null,

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
Итак, я собираюсь использовать элемент карты для отображения деталей selectedDish.

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
mat-card-title, чтобы показать

198
00:15:37,600 --> 00:15:44,490
детали названия selectedDish здесь.

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
selectedDish имя и трубы в верхнем регистре.

202
00:16:09,035 --> 00:16:17,375
Итак, обратите внимание, как я включил имя selectedDish, используя мат card-title.

203
00:16:17,375 --> 00:16:22,750
Теперь, кроме того, я собираюсь использовать метод

204
00:16:23,720 --> 00:16:33,930
один называется изображение, которое принимает атрибут под названием mat-card-image и

205
00:16:33,930 --> 00:16:43,630
источник будет, как вы ожидали,

206
00:16:43,630 --> 00:16:49,270
это должно быть selectedDish.image и

207
00:16:49,270 --> 00:16:54,310
, то альтернатива, которую я собираюсь

208
00:16:54,310 --> 00:17:01,640
дать как selectedDish.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
я собираюсь включить selectedDish описание,

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
Итак, я буду использовать mat-card-действия здесь и внутри

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
Итак, поднимаясь вверх, мы скажем, импортировать MatCardModule из

228
00:19:07,390 --> 00:19:13,555
угловой карты материала и

229
00:19:13,555 --> 00:19:23,150
импортировать MatButtonModule из угловой кнопки материала.

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
like и кнопка поделиться,

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
Угловые компоненты часть вторая.