1
00:00:03,650 --> 00:00:11,280
Hora de continuar com nosso próximo exercício, onde examinaremos os componentes mais uma vez.

2
00:00:11,280 --> 00:00:15,600
Vamos modificar o modelo para

3
00:00:15,600 --> 00:00:20,670
o componente de menu que já incluímos em nosso aplicativo Angular

4
00:00:20,670 --> 00:00:30,580
usando um novo tipo de componente material para layout nosso menu de uma maneira diferente.

5
00:00:30,580 --> 00:00:36,625
Ao longo do caminho, analisaremos também a utilização da directiva estrutural NGIF.

6
00:00:36,625 --> 00:00:40,790
Indo para o arquivo de modelo do nosso componente de menu,

7
00:00:40,790 --> 00:00:44,685
Vou fazer algumas alterações neste arquivo de modelo.

8
00:00:44,685 --> 00:00:47,900
Primeiro, Eu vou adicionar em outro div aqui

9
00:00:47,900 --> 00:00:56,170
com FxFlex e, em seguida, fechar esse div lá.

10
00:00:56,170 --> 00:01:01,245
Então, observe que agora dentro da minha div externa,

11
00:01:01,245 --> 00:01:03,050
Eu tenho duas divs aqui.

12
00:01:03,050 --> 00:01:07,855
Então, um com o div e o segundo com a lista vazia.

13
00:01:07,855 --> 00:01:15,880
Então, estes são dois pedaços de conteúdo que precisam ser colocados na tela.

14
00:01:15,880 --> 00:01:19,450
Mas note que eu especifiquei o FXLayout para ser colorido.

15
00:01:19,450 --> 00:01:21,590
Então, o que significa que, essas duas peças de conteúdo

16
00:01:21,590 --> 00:01:24,445
será colocado para fora um em cima do outro,

17
00:01:24,445 --> 00:01:27,025
empilhados um em cima do outro.

18
00:01:27,025 --> 00:01:29,370
Então, na primeira div,

19
00:01:29,370 --> 00:01:32,330
Vou incluir um pouco de conteúdo aqui.

20
00:01:32,330 --> 00:01:38,570
Então, vou colocar outra div aqui dentro.

21
00:01:38,570 --> 00:01:42,005
Mais tarde, eu vou estar adicionando mais neste div.

22
00:01:42,005 --> 00:01:50,625
Mas no momento, eu só vou ter um h3 com o item de menu lá,

23
00:01:50,625 --> 00:01:56,875
e, em seguida, adicionar um elemento de linha horizontal a este menu.

24
00:01:56,875 --> 00:02:02,780
Então, isso dará o título para

25
00:02:02,780 --> 00:02:08,900
esta página em particular no topo do meu aplicativo quando ele é renderizado.

26
00:02:08,900 --> 00:02:12,395
Então, essa é uma modificação.

27
00:02:12,395 --> 00:02:14,070
Agora, para a segunda parte,

28
00:02:14,070 --> 00:02:16,435
em vez de usar o item mat-list-item,

29
00:02:16,435 --> 00:02:21,830
Eu vou agora pegar a ajuda de uma lista de esteiras.

30
00:02:21,830 --> 00:02:26,000
MAT-Grid List me permite layout do conteúdo como

31
00:02:26,000 --> 00:02:30,625
uma grade de itens em vez de uma lista de itens.

32
00:02:30,625 --> 00:02:38,220
Vimos como o menu foi colocado com a lista de itens no exercício anterior.

33
00:02:38,220 --> 00:02:41,810
Agora, eu gostaria de colocar o mesmo menu de uma maneira diferente um layout

34
00:02:41,810 --> 00:02:45,615
pouco mais atraente para o menu.

35
00:02:45,615 --> 00:02:48,140
Então, em vez de usar o mat-list,

36
00:02:48,140 --> 00:02:52,520
Eu vou agora mudar isso de mat-list para uma mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
Então, antes de fazer isso,

38
00:02:54,005 --> 00:03:03,645
Eu também vou colocar isso dentro de outra div para a qual vou aplicar o FxFlex aqui,

39
00:03:03,645 --> 00:03:10,320
para que a lista de esteiras esteja em sua própria lá.

40
00:03:10,320 --> 00:03:14,540
Então, isso me dará mais flexibilidade para adicionar itens

41
00:03:14,540 --> 00:03:19,180
a esta unidade em particular se eu precisar mais tarde.

42
00:03:19,180 --> 00:03:23,505
A lista de grade agora usa um parâmetro chamado como

43
00:03:23,505 --> 00:03:28,450
colunas que especifica quantas colunas essa grade deve conter.

44
00:03:28,450 --> 00:03:35,540
Agora vou especificar as colunas como duas porque só tenho quatro itens no meu menu.

45
00:03:35,540 --> 00:03:37,290
Então, duas colunas são suficientes.

46
00:03:37,290 --> 00:03:41,995
Então, pelo menos eu tenho duas filas da grade lá.

47
00:03:41,995 --> 00:03:45,770
Além disso, isso leva outro parâmetro chamado

48
00:03:45,770 --> 00:03:50,010
como rowHeight ou um atributo chamado como rowHeight,

49
00:03:50,010 --> 00:03:56,650
que vou especificar para ser 200 pixels aqui.

50
00:03:56,680 --> 00:04:03,630
Então, isso completaria a lista de esteiras que eu tenho dentro do div lá.

51
00:04:03,630 --> 00:04:09,120
Agora, uma vez que eu faça a mudança, em seguida, dentro disso,

52
00:04:09,120 --> 00:04:12,700
eu vou entrar e usar,

53
00:04:12,700 --> 00:04:15,045
em vez do item mat-list-item,

54
00:04:15,045 --> 00:04:20,450
isso agora vai ser um tapete de telha aqui.

55
00:04:20,450 --> 00:04:22,480
Então, o bloco de grade.

56
00:04:22,480 --> 00:04:24,580
Basicamente, telhas da grade.

57
00:04:24,580 --> 00:04:27,350
Esta telha grade, como você percebe,

58
00:04:27,350 --> 00:04:31,200
Eu vou estar iterando sobre a lista de pratos.

59
00:04:31,200 --> 00:04:35,090
Então, eu ainda estou usando minha diretiva NGFor com ele.

60
00:04:35,090 --> 00:04:38,510
Este mosaico de grelha irá agora incluir

61
00:04:38,510 --> 00:04:43,095
o conteúdo que vai ser colocado em cada bloco da minha grelha aqui.

62
00:04:43,095 --> 00:04:45,320
Agora, dentro do bloco,

63
00:04:45,320 --> 00:04:49,105
Vou usar a imagem como ela existe.

64
00:04:49,105 --> 00:04:53,990
Mas eu vou usar a imagem,

65
00:04:53,990 --> 00:04:58,750
não com o MatListAvatar porque isso não pode ser aplicado aqui, e em vez disso,

66
00:04:58,750 --> 00:05:04,720
Vou especificar a altura para a imagem como 200 pixels.

67
00:05:04,720 --> 00:05:09,230
Então, isso corresponde à altura da linha para que minha imagem estenda

68
00:05:09,230 --> 00:05:14,325
toda a altura do meu bloco lá.

69
00:05:14,325 --> 00:05:16,830
Então, altura da imagem, 200 pixels,

70
00:05:16,830 --> 00:05:20,190
e a fonte e o alt permanecerão como tal.

71
00:05:20,190 --> 00:05:22,745
Então, a próxima parte,

72
00:05:22,745 --> 00:05:24,830
em vez do h1,

73
00:05:24,830 --> 00:05:27,110
Eu vou mudar este

74
00:05:27,110 --> 00:05:33,880
para ser

75
00:05:33,880 --> 00:05:39,710
fechado dentro mat-grid-tile-rodapé.

76
00:05:41,780 --> 00:05:49,770
Então, qualquer conteúdo que esteja aqui dentro aparecerá dentro do rodapé mat-grid-tile-mosaico aqui.

77
00:05:49,770 --> 00:05:54,035
Agora, lá dentro eu posso especificar qualquer conteúdo que eu quiser.

78
00:05:54,035 --> 00:05:57,295
Então, para o bloco de grade,

79
00:05:57,295 --> 00:06:00,170
dada a descrição completa é um pouco demais.

80
00:06:00,170 --> 00:06:02,245
Então, eu vou remover esta descrição,

81
00:06:02,245 --> 00:06:05,765
e em vez disso, use apenas o h1 lá.

82
00:06:05,765 --> 00:06:12,355
Agora, além disso, eu vou ter a ajuda de um tubo angular aqui.

83
00:06:12,355 --> 00:06:16,340
O tubo que eu vou aplicar a isso, como você pode ver,

84
00:06:16,340 --> 00:06:22,095
o tubo é a barra vertical do seu teclado.

85
00:06:22,095 --> 00:06:25,440
Então, vou usar o tubo maiúsculo.

86
00:06:25,440 --> 00:06:27,175
Então, o que esse tubo faz?

87
00:06:27,175 --> 00:06:32,795
Este tubo, o tubo maiúsculo, transformará o nome do prato de

88
00:06:32,795 --> 00:06:39,015
seja o que for em uma palavra inteira com letras maiúsculas.

89
00:06:39,015 --> 00:06:42,215
Então, qualquer que seja o nome do prato seria renderizado como

90
00:06:42,215 --> 00:06:49,280
letras completamente maiúsculas quando ele é renderizado no modelo lá.

91
00:06:49,280 --> 00:06:52,800
Então, esse é o uso de um tubo angular aqui.

92
00:06:52,800 --> 00:06:56,870
Então, vamos usar tubos mais angulares à medida que avançamos.

93
00:06:56,870 --> 00:07:05,205
Este é o nosso primeiro encontro com um dos tubos angulares embutidos neste curso.

94
00:07:05,205 --> 00:07:10,400
Então, com isso, nós modificamos nosso layout

95
00:07:10,400 --> 00:07:15,670
para mostrar este div aqui e então esta lista de grade aqui.

96
00:07:15,670 --> 00:07:17,240
Vamos salvar as alterações.

97
00:07:17,240 --> 00:07:21,070
Indo agora para o arquivo app.module.ts,

98
00:07:21,070 --> 00:07:24,640
precisamos importar o MatgridListModule lá.

99
00:07:24,640 --> 00:07:27,660
Então, indo para o topo lá, vamos dizer,

100
00:07:27,660 --> 00:07:36,490
“Importar MatgridListModule de angular/material/grid/list.”

101
00:07:39,260 --> 00:07:42,055
Uma vez que tenhamos adicionado isso,

102
00:07:42,055 --> 00:07:45,925
então vamos descer para as importações no decorador,

103
00:07:45,925 --> 00:07:53,210
e, em seguida, incluir o MatgridListModule nas entradas.

104
00:07:53,210 --> 00:07:55,830
Vamos, novamente, salvar as alterações.

105
00:07:55,830 --> 00:08:01,650
Vamos dar uma olhada rápida na nossa página web e como ela se parece na tela.

106
00:08:01,650 --> 00:08:03,730
Indo para a nossa página web,

107
00:08:03,730 --> 00:08:09,125
agora você pode ver que seu menu está agora definido de uma maneira diferente.

108
00:08:09,125 --> 00:08:13,590
Embora, não é realmente tão grande olhar para o momento.

109
00:08:13,590 --> 00:08:15,230
Eu não sou designer,

110
00:08:15,230 --> 00:08:18,880
então isso é o melhor que eu poderia obter com ele.

111
00:08:18,880 --> 00:08:22,330
Agora, se eu tivesse 20 itens no meu menu,

112
00:08:22,330 --> 00:08:27,110
então eu poderia colocar para fora vários itens em cada linha e várias colunas,

113
00:08:27,110 --> 00:08:31,860
e então eu poderia comprimir o espaço que cada item ocupa,

114
00:08:31,860 --> 00:08:35,660
ou eu posso aumentar o tamanho da imagem para que ele

115
00:08:35,660 --> 00:08:40,245
ocupe toda a coisa até que ele vai parecer muito mais atraente na tela.

116
00:08:40,245 --> 00:08:49,185
Agora, vamos dar uma olhada nessa mesma coisa quando ela é vista na tela de um dispositivo menor.

117
00:08:49,185 --> 00:08:52,400
Então, é aqui que eu vou ter a ajuda de

118
00:08:52,400 --> 00:08:57,990
as opções de desenvolvedor no meu navegador Chrome.

119
00:08:57,990 --> 00:09:01,175
Então, vou começar as ferramentas de desenvolvimento aqui.

120
00:09:01,175 --> 00:09:04,330
Quando eu tiver as ferramentas de desenvolvimento aqui,

121
00:09:04,330 --> 00:09:08,340
você pode ver este botão aqui dizendo, “Alternar barra de ferramentas do dispositivo.”

122
00:09:08,340 --> 00:09:10,070
Então, deixe-me alternar de volta.

123
00:09:10,070 --> 00:09:16,180
Então você pode ver a mesma página sendo renderizada em diferentes tamanhos de tela.

124
00:09:16,180 --> 00:09:23,210
Então aqui, você vê a página sendo renderizada em um Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
e, em seguida, a mesma coisa

126
00:09:28,090 --> 00:09:34,435
você pode vê-lo sendo renderizado no modo paisagem.

127
00:09:34,435 --> 00:09:39,110
Então, você pode ver que isso me permite ver a mesma página

128
00:09:39,110 --> 00:09:44,490
em diferentes tamanhos de tela usando as ferramentas de desenvolvedor embutidas no Android.

129
00:09:44,490 --> 00:09:48,755
Então, vamos dar uma olhada no que parece em um iPhone.

130
00:09:48,755 --> 00:09:51,815
O menu parece muito mais atraente aqui.

131
00:09:51,815 --> 00:09:55,220
Isto é o que eu gostaria de alcançar na tela.

132
00:09:55,220 --> 00:10:02,155
Se minhas imagens fossem muito maiores em tamanho, mesmo nas telas de maior resolução,

133
00:10:02,155 --> 00:10:06,045
o menu ficaria assim.

134
00:10:06,045 --> 00:10:11,205
No modo paisagem, isso é o que vai parecer.

135
00:10:11,205 --> 00:10:15,045
Agora, anote essas ferramentas de desenvolvedor no Chrome.

136
00:10:15,045 --> 00:10:21,790
Nós vamos usar as ferramentas de desenvolvedor mais tarde quando usarmos Angular em

137
00:10:21,790 --> 00:10:25,340
mais detalhes porque podemos examinar coisas como o que Angular

138
00:10:25,340 --> 00:10:30,180
pode imprimir para nós no console.

139
00:10:30,180 --> 00:10:36,650
Então podemos até examinar como as diferentes partes da nossa aplicação estão sendo obtidas.

140
00:10:36,650 --> 00:10:40,440
Podemos analisar o desempenho da rede do nosso aplicativo, e assim por diante.

141
00:10:40,440 --> 00:10:45,110
Então, é aí que essas ferramentas de desenvolvedor adição é muito,

142
00:10:45,110 --> 00:10:47,270
muito útil para nós.

143
00:10:47,270 --> 00:10:51,100
Voltando à maneira normal,

144
00:10:51,100 --> 00:10:56,790
esta é a aparência da nossa página web em um navegador de desktop padrão.

145
00:10:56,790 --> 00:10:58,545
Ainda não terminamos.

146
00:10:58,545 --> 00:11:02,955
Vamos voltar aos componentes do menu.

147
00:11:02,955 --> 00:11:07,200
Arquivo tipescript e, em seguida, este prato que eu tenho

148
00:11:07,200 --> 00:11:11,765
definido aqui em vez de manter isso dentro da minha classe,

149
00:11:11,765 --> 00:11:18,060
Eu vou mover esses pratos em uma constante que eu

150
00:11:18,060 --> 00:11:25,670
vai definir bem lá em cima e vamos nomeá-lo como pratos const,

151
00:11:25,860 --> 00:11:31,370
e este seria do tipo prato uma matriz,

152
00:11:31,370 --> 00:11:38,825
e então eu vai cortar todo este conjunto de pratos daqui e, em seguida, movê-lo para lá.

153
00:11:38,825 --> 00:11:43,450
Isso está em preparação para um exercício futuro em que vamos

154
00:11:43,450 --> 00:11:50,050
para não incluir esse tipo de dados em nosso aplicativo,

155
00:11:50,050 --> 00:11:59,950
, mas em vez disso estaremos movendo isso para um serviço.

156
00:11:59,950 --> 00:12:05,260
Então, o que eu fiz foi cortar essa informação pratos e

157
00:12:05,260 --> 00:12:11,405
em seguida, colocá-lo em uma constante aqui com o nome pratos em todas as capitais aqui,

158
00:12:11,405 --> 00:12:16,100
e então agora meus pratos é deixado como um órfão aqui.

159
00:12:16,100 --> 00:12:26,275
Então, isso eu vou torná-lo igual a pratos aqui.

160
00:12:26,275 --> 00:12:31,165
Agora, você tem que se perguntar como é que eu removi o tipo para os pratos.

161
00:12:31,165 --> 00:12:35,125
TypeScript é inteligente o suficiente para perceber que quando você faz isso,

162
00:12:35,125 --> 00:12:40,360
ele irá atribuir automaticamente o tipo de pratos para combinar com o que você tem em pratos.

163
00:12:40,360 --> 00:12:44,195
Então, mesmo se você não digitá-lo em TypeScript vai fazer isso,

164
00:12:44,195 --> 00:12:47,350
mas se você quiser ser completamente claro que

165
00:12:47,350 --> 00:12:50,925
pode fazer isso também e que vai funcionar tão bem.

166
00:12:50,925 --> 00:12:53,920
Ok, se você preferir isso vai deixá-lo como tal.

167
00:12:53,920 --> 00:13:01,795
Agora, além disso, vou introduzir mais uma variável aqui chamada SelectedDish.

168
00:13:01,795 --> 00:13:08,665
Esta variável eu vou usar neste exercício e um dos exercícios posteriores também.

169
00:13:08,665 --> 00:13:17,875
Então, eu vou fazer isso igual ao primeiro prato na minha matriz.

170
00:13:17,875 --> 00:13:24,730
Agora, este SelectedDish será útil para a próxima parte deste exercício.

171
00:13:24,730 --> 00:13:29,265
Então, vamos salvar as alterações e, em seguida, voltar para o nosso modelo.

172
00:13:29,265 --> 00:13:33,460
No modelo, o que eu vou fazer é logo abaixo do menu,

173
00:13:33,460 --> 00:13:39,825
Eu vou usar um elemento de cartão de material angular para

174
00:13:39,825 --> 00:13:46,555
exibir este SelectedDish logo abaixo do menu lá.

175
00:13:46,555 --> 00:13:50,700
Agora, embora esta não seja a melhor maneira de fazê-lo,

176
00:13:50,700 --> 00:13:57,720
mas isso eu estou fazendo em preparação para o próximo exercício apenas para

177
00:13:57,720 --> 00:14:04,920
ilustrar para vocês como um elemento de cartão de material pode ser usado para nossa aplicação.

178
00:14:04,920 --> 00:14:09,330
Então, eu vou usar um div com um fx flex aqui,

179
00:14:09,330 --> 00:14:12,710
e, em seguida, a este div eu vou adicionar em

180
00:14:12,710 --> 00:14:22,565
um nGIF com o SelectedDish.

181
00:14:22,565 --> 00:14:28,045
Então, note que eu estou aplicando um nGIF a este div aqui para

182
00:14:28,045 --> 00:14:33,330
especificar que se o selectedDish é atualmente nulo,

183
00:14:33,330 --> 00:14:37,535
então eu não vou adicionar este div ao dom.

184
00:14:37,535 --> 00:14:38,920
Se não for,

185
00:14:38,920 --> 00:14:42,050
então este div será adicionado ao dom,

186
00:14:42,050 --> 00:14:48,485
e exibirá o elemento do cartão com o conteúdo no If.

187
00:14:48,485 --> 00:14:55,760
Então, eu vou usar um elemento de cartão para exibir os detalhes do SelectedDish.

188
00:14:55,760 --> 00:14:57,290
Então, para fazer isso,

189
00:14:57,290 --> 00:15:02,870
Eu uso um cartão de mat-aqui do cartão de desenhos de material aqui.

190
00:15:02,870 --> 00:15:05,090
O mat-card em si tem

191
00:15:05,090 --> 00:15:10,375
um mat-card cabeçalho parte

192
00:15:10,375 --> 00:15:15,640
e também junto com o mat-card-header,

193
00:15:15,640 --> 00:15:21,010
ele vai ter um mat-card-content.

194
00:15:21,010 --> 00:15:25,055
Deixe-me fechar esse mat-card-content.

195
00:15:25,055 --> 00:15:27,785
Então, no cabeçalho, o que eu quero mostrar no cabeçalho?

196
00:15:27,785 --> 00:15:31,725
No cabeçalho, eu quero usar

197
00:15:31,725 --> 00:15:37,600
um mat-card-title para mostrar

198
00:15:37,600 --> 00:15:44,490
os detalhes do nome do selectedDish aqui.

199
00:15:44,490 --> 00:15:53,755
Então, eu iria entrar e dizer h3 e fechar o h3 e dentro aqui eu vou

200
00:15:53,755 --> 00:15:59,870
usar a interpolação e, em seguida, dizer

201
00:16:00,240 --> 00:16:09,035
selectedDish nome e pipe maiúsculas.

202
00:16:09,035 --> 00:16:17,375
Então, observe como eu incluí o nome do SelectedDish usando o título mat-cartão-título.

203
00:16:17,375 --> 00:16:22,750
Agora, além disso, eu vou usar um método,

204
00:16:23,720 --> 00:16:33,930
um chamado imagem que leva um atributo chamado mat-card-image e

205
00:16:33,930 --> 00:16:43,630
a fonte seria como você esperava,

206
00:16:43,630 --> 00:16:49,270
isso deve ser selectedDisish.Image e

207
00:16:49,270 --> 00:16:54,310
, em seguida, a alternativa que eu estou indo

208
00:16:54,310 --> 00:17:01,640
para dar como selectedDish.Name.

209
00:17:03,450 --> 00:17:11,790
Então, esta seria a imagem que será incluída no meu cartão aqui.

210
00:17:11,790 --> 00:17:13,905
Então, no conteúdo,

211
00:17:13,905 --> 00:17:27,640
Eu vou incluir descrição SelectedDish,

212
00:17:31,680 --> 00:17:36,105
e, em seguida, junto com o conteúdo aqui,

213
00:17:36,105 --> 00:17:41,860
Eu também posso adicionar em alguns botões para a parte inferior do cartão.

214
00:17:41,860 --> 00:17:54,445
Então, vou usar mat-card-actions aqui e dentro

215
00:17:54,445 --> 00:17:58,585
lá eu posso incluir um botão.

216
00:17:58,585 --> 00:18:06,550
Então, você vê que este é o uso de um botão

217
00:18:06,550 --> 00:18:14,210
no meu aplicativo, dois botões.

218
00:18:16,130 --> 00:18:20,040
Observe o uso deste botão de tapete aqui.

219
00:18:20,040 --> 00:18:26,360
Então, isso vai transformar este botão em um design de material como botão aqui,

220
00:18:26,360 --> 00:18:30,725
e assim, esses dois botões aparecerão na parte inferior do meu cartão aqui.

221
00:18:30,725 --> 00:18:35,065
Então, com isso, eu adicionei nos detalhes do SelectedDish.

222
00:18:35,065 --> 00:18:36,980
Há razão para eu fazer isso.

223
00:18:36,980 --> 00:18:40,910
Estou mostrando como você pode exibir os detalhes em um cartão,

224
00:18:40,910 --> 00:18:45,435
bem, isso está em preparação para sua primeira tarefa.

225
00:18:45,435 --> 00:18:52,700
Então, você pode ver como podemos usar um cartão de design de material em nosso modelo aqui.

226
00:18:52,700 --> 00:18:59,565
Indo para @module .ts, precisamos importar o cartão e o módulo de botão.

227
00:18:59,565 --> 00:19:07,390
Então, indo até o topo, vamos dizer importar MatcardModule de

228
00:19:07,390 --> 00:19:13,555
cartão de material angular e

229
00:19:13,555 --> 00:19:23,150
importar MatButtonModule do botão de material angular.

230
00:19:23,700 --> 00:19:27,280
Agora que adicionamos esses dois ao topo,

231
00:19:27,280 --> 00:19:31,389
vamos para o decorador,

232
00:19:31,389 --> 00:19:40,580
e nas importações vamos adicionar no MatcardModule e o MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
Então, vamos salvar as alterações e, em seguida, dar uma olhada rápida em nossa página web.

234
00:19:46,945 --> 00:19:50,535
Olhando para a nossa aplicação angular no navegador,

235
00:19:50,535 --> 00:19:54,690
agora você vê que temos o menu sendo exibido

236
00:19:54,690 --> 00:20:00,255
aqui e, em seguida, na parte inferior, temos agora um elemento de cartão.

237
00:20:00,255 --> 00:20:06,090
Então, você pode ver o elemento do cartão aqui com o título lá e a imagem lá.

238
00:20:06,090 --> 00:20:09,770
Claro, a imagem parece horrível porque é

239
00:20:09,770 --> 00:20:12,990
o tamanho real da imagem que eu lhe dei é tão

240
00:20:12,990 --> 00:20:17,130
pequeno e foi expandido para preencher toda a tela.

241
00:20:17,130 --> 00:20:20,075
Olhe para o fundo aqui. Então, este

242
00:20:20,075 --> 00:20:24,625
contém a descrição da imagem e, em seguida, dois botões aqui,

243
00:20:24,625 --> 00:20:26,020
logo abaixo aqui.

244
00:20:26,020 --> 00:20:35,990
Então, é assim que o botão mat-estilos os botões em um modelo angular,

245
00:20:35,990 --> 00:20:37,395
assim você tem como eo botão compartilhar.

246
00:20:37,395 --> 00:20:39,070
Claro, eles não estão fazendo nada,

247
00:20:39,070 --> 00:20:43,695
mas observe o design do material como se o comportamento estivesse lá.

248
00:20:43,695 --> 00:20:45,070
Então, quando você clica no botão,

249
00:20:45,070 --> 00:20:48,100
você pode ver as ondulações passando.

250
00:20:48,100 --> 00:20:52,440
Então, essa é a razão pela qual eu decidi usar

251
00:20:52,440 --> 00:21:04,260
o módulo de material angular para projetar os modelos neste curso.

252
00:21:04,260 --> 00:21:07,700
Então, olhando para ele em um dispositivo menor,

253
00:21:07,700 --> 00:21:11,960
parece muito mais atraente em um dispositivo menor.

254
00:21:11,960 --> 00:21:16,000
Então, você pode ver que a renderização é muito melhor em um dispositivo menor,

255
00:21:16,000 --> 00:21:19,715
você pode ver que na tela você pode ver

256
00:21:19,715 --> 00:21:27,245
o cartão ali mostrando os detalhes e os dois botões lá,

257
00:21:27,245 --> 00:21:29,750
o gosto e o botão de compartilhamento,

258
00:21:29,750 --> 00:21:34,190
e os detalhes do prato.

259
00:21:37,080 --> 00:21:40,650
Então, isso completa este exercício.

260
00:21:40,650 --> 00:21:42,170
Então, neste exercício,

261
00:21:42,170 --> 00:21:49,800
examinamos o uso da lista de grade e

262
00:21:49,800 --> 00:22:00,030
os componentes de design de material de cartão para projetar o modelo para o nosso componente de menu.

263
00:22:00,030 --> 00:22:05,720
Este pode ser um bom momento para você fazer um bom comentário com a mensagem,

264
00:22:05,720 --> 00:22:09,620
Componentes angulares parte dois.