Hora de continuar com nosso próximo exercício, onde examinaremos os componentes mais uma vez.
Vamos modificar o modelo para
o componente de menu que já incluímos em nosso aplicativo Angular
usando um novo tipo de componente material para layout nosso menu de uma maneira diferente.
Ao longo do caminho, analisaremos também a utilização da directiva estrutural NGIF.
Indo para o arquivo de modelo do nosso componente de menu,
Vou fazer algumas alterações neste arquivo de modelo.
Primeiro, Eu vou adicionar em outro div aqui
com FxFlex e, em seguida, fechar esse div lá.
Então, observe que agora dentro da minha div externa,
Eu tenho duas divs aqui.
Então, um com o div e o segundo com a lista vazia.
Então, estes são dois pedaços de conteúdo que precisam ser colocados na tela.
Mas note que eu especifiquei o FXLayout para ser colorido.
Então, o que significa que, essas duas peças de conteúdo
será colocado para fora um em cima do outro,
empilhados um em cima do outro.
Então, na primeira div,
Vou incluir um pouco de conteúdo aqui.
Então, vou colocar outra div aqui dentro.
Mais tarde, eu vou estar adicionando mais neste div.
Mas no momento, eu só vou ter um h3 com o item de menu lá,
e, em seguida, adicionar um elemento de linha horizontal a este menu.
Então, isso dará o título para
esta página em particular no topo do meu aplicativo quando ele é renderizado.
Então, essa é uma modificação.
Agora, para a segunda parte,
em vez de usar o item mat-list-item,
Eu vou agora pegar a ajuda de uma lista de esteiras.
MAT-Grid List me permite layout do conteúdo como
uma grade de itens em vez de uma lista de itens.
Vimos como o menu foi colocado com a lista de itens no exercício anterior.
Agora, eu gostaria de colocar o mesmo menu de uma maneira diferente um layout
pouco mais atraente para o menu.
Então, em vez de usar o mat-list,
Eu vou agora mudar isso de mat-list para uma mat-grid-list.
Então, antes de fazer isso,
Eu também vou colocar isso dentro de outra div para a qual vou aplicar o FxFlex aqui,
para que a lista de esteiras esteja em sua própria lá.
Então, isso me dará mais flexibilidade para adicionar itens
a esta unidade em particular se eu precisar mais tarde.
A lista de grade agora usa um parâmetro chamado como
colunas que especifica quantas colunas essa grade deve conter.
Agora vou especificar as colunas como duas porque só tenho quatro itens no meu menu.
Então, duas colunas são suficientes.
Então, pelo menos eu tenho duas filas da grade lá.
Além disso, isso leva outro parâmetro chamado
como rowHeight ou um atributo chamado como rowHeight,
que vou especificar para ser 200 pixels aqui.
Então, isso completaria a lista de esteiras que eu tenho dentro do div lá.
Agora, uma vez que eu faça a mudança, em seguida, dentro disso,
eu vou entrar e usar,
em vez do item mat-list-item,
isso agora vai ser um tapete de telha aqui.
Então, o bloco de grade.
Basicamente, telhas da grade.
Esta telha grade, como você percebe,
Eu vou estar iterando sobre a lista de pratos.
Então, eu ainda estou usando minha diretiva NGFor com ele.
Este mosaico de grelha irá agora incluir
o conteúdo que vai ser colocado em cada bloco da minha grelha aqui.
Agora, dentro do bloco,
Vou usar a imagem como ela existe.
Mas eu vou usar a imagem,
não com o MatListAvatar porque isso não pode ser aplicado aqui, e em vez disso,
Vou especificar a altura para a imagem como 200 pixels.
Então, isso corresponde à altura da linha para que minha imagem estenda
toda a altura do meu bloco lá.
Então, altura da imagem, 200 pixels,
e a fonte e o alt permanecerão como tal.
Então, a próxima parte,
em vez do h1,
Eu vou mudar este
para ser
fechado dentro mat-grid-tile-rodapé.
Então, qualquer conteúdo que esteja aqui dentro aparecerá dentro do rodapé mat-grid-tile-mosaico aqui.
Agora, lá dentro eu posso especificar qualquer conteúdo que eu quiser.
Então, para o bloco de grade,
dada a descrição completa é um pouco demais.
Então, eu vou remover esta descrição,
e em vez disso, use apenas o h1 lá.
Agora, além disso, eu vou ter a ajuda de um tubo angular aqui.
O tubo que eu vou aplicar a isso, como você pode ver,
o tubo é a barra vertical do seu teclado.
Então, vou usar o tubo maiúsculo.
Então, o que esse tubo faz?
Este tubo, o tubo maiúsculo, transformará o nome do prato de
seja o que for em uma palavra inteira com letras maiúsculas.
Então, qualquer que seja o nome do prato seria renderizado como
letras completamente maiúsculas quando ele é renderizado no modelo lá.
Então, esse é o uso de um tubo angular aqui.
Então, vamos usar tubos mais angulares à medida que avançamos.
Este é o nosso primeiro encontro com um dos tubos angulares embutidos neste curso.
Então, com isso, nós modificamos nosso layout
para mostrar este div aqui e então esta lista de grade aqui.
Vamos salvar as alterações.
Indo agora para o arquivo app.module.ts,
precisamos importar o MatgridListModule lá.
Então, indo para o topo lá, vamos dizer,
“Importar MatgridListModule de angular/material/grid/list.”
Uma vez que tenhamos adicionado isso,
então vamos descer para as importações no decorador,
e, em seguida, incluir o MatgridListModule nas entradas.
Vamos, novamente, salvar as alterações.
Vamos dar uma olhada rápida na nossa página web e como ela se parece na tela.
Indo para a nossa página web,
agora você pode ver que seu menu está agora definido de uma maneira diferente.
Embora, não é realmente tão grande olhar para o momento.
Eu não sou designer,
então isso é o melhor que eu poderia obter com ele.
Agora, se eu tivesse 20 itens no meu menu,
então eu poderia colocar para fora vários itens em cada linha e várias colunas,
e então eu poderia comprimir o espaço que cada item ocupa,
ou eu posso aumentar o tamanho da imagem para que ele
ocupe toda a coisa até que ele vai parecer muito mais atraente na tela.
Agora, vamos dar uma olhada nessa mesma coisa quando ela é vista na tela de um dispositivo menor.
Então, é aqui que eu vou ter a ajuda de
as opções de desenvolvedor no meu navegador Chrome.
Então, vou começar as ferramentas de desenvolvimento aqui.
Quando eu tiver as ferramentas de desenvolvimento aqui,
você pode ver este botão aqui dizendo, “Alternar barra de ferramentas do dispositivo.”
Então, deixe-me alternar de volta.
Então você pode ver a mesma página sendo renderizada em diferentes tamanhos de tela.
Então aqui, você vê a página sendo renderizada em um Galaxy S5,
e, em seguida, a mesma coisa
você pode vê-lo sendo renderizado no modo paisagem.
Então, você pode ver que isso me permite ver a mesma página
em diferentes tamanhos de tela usando as ferramentas de desenvolvedor embutidas no Android.
Então, vamos dar uma olhada no que parece em um iPhone.
O menu parece muito mais atraente aqui.
Isto é o que eu gostaria de alcançar na tela.
Se minhas imagens fossem muito maiores em tamanho, mesmo nas telas de maior resolução,
o menu ficaria assim.
No modo paisagem, isso é o que vai parecer.
Agora, anote essas ferramentas de desenvolvedor no Chrome.
Nós vamos usar as ferramentas de desenvolvedor mais tarde quando usarmos Angular em
mais detalhes porque podemos examinar coisas como o que Angular
pode imprimir para nós no console.
Então podemos até examinar como as diferentes partes da nossa aplicação estão sendo obtidas.
Podemos analisar o desempenho da rede do nosso aplicativo, e assim por diante.
Então, é aí que essas ferramentas de desenvolvedor adição é muito,
muito útil para nós.
Voltando à maneira normal,
esta é a aparência da nossa página web em um navegador de desktop padrão.
Ainda não terminamos.
Vamos voltar aos componentes do menu.
Arquivo tipescript e, em seguida, este prato que eu tenho
definido aqui em vez de manter isso dentro da minha classe,
Eu vou mover esses pratos em uma constante que eu
vai definir bem lá em cima e vamos nomeá-lo como pratos const,
e este seria do tipo prato uma matriz,
e então eu vai cortar todo este conjunto de pratos daqui e, em seguida, movê-lo para lá.
Isso está em preparação para um exercício futuro em que vamos
para não incluir esse tipo de dados em nosso aplicativo,
, mas em vez disso estaremos movendo isso para um serviço.
Então, o que eu fiz foi cortar essa informação pratos e
em seguida, colocá-lo em uma constante aqui com o nome pratos em todas as capitais aqui,
e então agora meus pratos é deixado como um órfão aqui.
Então, isso eu vou torná-lo igual a pratos aqui.
Agora, você tem que se perguntar como é que eu removi o tipo para os pratos.
TypeScript é inteligente o suficiente para perceber que quando você faz isso,
ele irá atribuir automaticamente o tipo de pratos para combinar com o que você tem em pratos.
Então, mesmo se você não digitá-lo em TypeScript vai fazer isso,
mas se você quiser ser completamente claro que
pode fazer isso também e que vai funcionar tão bem.
Ok, se você preferir isso vai deixá-lo como tal.
Agora, além disso, vou introduzir mais uma variável aqui chamada SelectedDish.
Esta variável eu vou usar neste exercício e um dos exercícios posteriores também.
Então, eu vou fazer isso igual ao primeiro prato na minha matriz.
Agora, este SelectedDish será útil para a próxima parte deste exercício.
Então, vamos salvar as alterações e, em seguida, voltar para o nosso modelo.
No modelo, o que eu vou fazer é logo abaixo do menu,
Eu vou usar um elemento de cartão de material angular para
exibir este SelectedDish logo abaixo do menu lá.
Agora, embora esta não seja a melhor maneira de fazê-lo,
mas isso eu estou fazendo em preparação para o próximo exercício apenas para
ilustrar para vocês como um elemento de cartão de material pode ser usado para nossa aplicação.
Então, eu vou usar um div com um fx flex aqui,
e, em seguida, a este div eu vou adicionar em
um nGIF com o SelectedDish.
Então, note que eu estou aplicando um nGIF a este div aqui para
especificar que se o selectedDish é atualmente nulo,
então eu não vou adicionar este div ao dom.
Se não for,
então este div será adicionado ao dom,
e exibirá o elemento do cartão com o conteúdo no If.
Então, eu vou usar um elemento de cartão para exibir os detalhes do SelectedDish.
Então, para fazer isso,
Eu uso um cartão de mat-aqui do cartão de desenhos de material aqui.
O mat-card em si tem
um mat-card cabeçalho parte
e também junto com o mat-card-header,
ele vai ter um mat-card-content.
Deixe-me fechar esse mat-card-content.
Então, no cabeçalho, o que eu quero mostrar no cabeçalho?
No cabeçalho, eu quero usar
um mat-card-title para mostrar
os detalhes do nome do selectedDish aqui.
Então, eu iria entrar e dizer h3 e fechar o h3 e dentro aqui eu vou
usar a interpolação e, em seguida, dizer
selectedDish nome e pipe maiúsculas.
Então, observe como eu incluí o nome do SelectedDish usando o título mat-cartão-título.
Agora, além disso, eu vou usar um método,
um chamado imagem que leva um atributo chamado mat-card-image e
a fonte seria como você esperava,
isso deve ser selectedDisish.Image e
, em seguida, a alternativa que eu estou indo
para dar como selectedDish.Name.
Então, esta seria a imagem que será incluída no meu cartão aqui.
Então, no conteúdo,
Eu vou incluir descrição SelectedDish,
e, em seguida, junto com o conteúdo aqui,
Eu também posso adicionar em alguns botões para a parte inferior do cartão.
Então, vou usar mat-card-actions aqui e dentro
lá eu posso incluir um botão.
Então, você vê que este é o uso de um botão
no meu aplicativo, dois botões.
Observe o uso deste botão de tapete aqui.
Então, isso vai transformar este botão em um design de material como botão aqui,
e assim, esses dois botões aparecerão na parte inferior do meu cartão aqui.
Então, com isso, eu adicionei nos detalhes do SelectedDish.
Há razão para eu fazer isso.
Estou mostrando como você pode exibir os detalhes em um cartão,
bem, isso está em preparação para sua primeira tarefa.
Então, você pode ver como podemos usar um cartão de design de material em nosso modelo aqui.
Indo para @module .ts, precisamos importar o cartão e o módulo de botão.
Então, indo até o topo, vamos dizer importar MatcardModule de
cartão de material angular e
importar MatButtonModule do botão de material angular.
Agora que adicionamos esses dois ao topo,
vamos para o decorador,
e nas importações vamos adicionar no MatcardModule e o MatPatternModule.
Então, vamos salvar as alterações e, em seguida, dar uma olhada rápida em nossa página web.
Olhando para a nossa aplicação angular no navegador,
agora você vê que temos o menu sendo exibido
aqui e, em seguida, na parte inferior, temos agora um elemento de cartão.
Então, você pode ver o elemento do cartão aqui com o título lá e a imagem lá.
Claro, a imagem parece horrível porque é
o tamanho real da imagem que eu lhe dei é tão
pequeno e foi expandido para preencher toda a tela.
Olhe para o fundo aqui. Então, este
contém a descrição da imagem e, em seguida, dois botões aqui,
logo abaixo aqui.
Então, é assim que o botão mat-estilos os botões em um modelo angular,
assim você tem como eo botão compartilhar.
Claro, eles não estão fazendo nada,
mas observe o design do material como se o comportamento estivesse lá.
Então, quando você clica no botão,
você pode ver as ondulações passando.
Então, essa é a razão pela qual eu decidi usar
o módulo de material angular para projetar os modelos neste curso.
Então, olhando para ele em um dispositivo menor,
parece muito mais atraente em um dispositivo menor.
Então, você pode ver que a renderização é muito melhor em um dispositivo menor,
você pode ver que na tela você pode ver
o cartão ali mostrando os detalhes e os dois botões lá,
o gosto e o botão de compartilhamento,
e os detalhes do prato.
Então, isso completa este exercício.
Então, neste exercício,
examinamos o uso da lista de grade e
os componentes de design de material de cartão para projetar o modelo para o nosso componente de menu.
Este pode ser um bom momento para você fazer um bom comentário com a mensagem,
Componentes angulares parte dois.