Como Criar Aplicativos Com Programação - Aula 06

Então vamos lá começar fazendo a próxima página né então a gente pode criar aqui a gente pode copiar essa página de detalhes aqui cont control ctrl v renomear Vamos colocar é carrinho P HTML aí aqui a gente pode mudar aqui o título para carrinho né nossa nova página Vamos criar aqui no roteamento lá no nosso rots Vamos criar mais uma rota de PR rota de carrinho né né Vamos criar aqui mais uma rota então ó do carrinho aqui carrinho e vai para carrinho certo beleza é que o carrinho também o menu principal também tem que

sumir na verdade a gente pode até fazer aqui quando clica nessa sacolinha né e pr pra parte de carrinho mas pra gente ver isso funcionando a gente pode ir lá na nossa index e mudar aqui a a o roteamento para ir para carrinho agora né aí essa a página de carinho tá igual porque a gente copiou lá de detalhes né e agora na index a gente vai precisar fazer mais uma referência aqui na index HTML para o CSS da página carrinho a gente vai criar aqui então vamos aqui na no CSS criar carrinho pcss certo

então vou pegar aqui as nossas cor que a gente tem padrão né copiar aqui colocar lá no começo aqui do nosso carrinho e vamos começar os nossos trabalhos deixa eu ir fechando essas outras coisas aqui só para ficar mais tudo organizado né então aqui no carrinho a gente olhar aqui na imagem ó a gente tem um botão daquele de voltar igual a gente tinha aqui nesse do meio do detalhes mas daí aqui tá diferente que aqui tá no meio tá um texto né meu carrinho o carrinho e no canto lá um botãozinho com três pontinhos

certo então tá um pouquinho diferente do que a gente tem nesse outro aqui então a gente pode fazer da seguinte forma a gente pode lá no no nosso carrinho P HTML a gente pode vamos Apagar tudo que tem aqui dentro desse vamos Apagar tudo que tem aqui na verdade a gente não vai reaproveitar nada desse padrão aqui ó deixa tudo zeradinho só o botão lá embaixo que depois a gente vai ter o pagar a gente ajeita lá certinho certo então vamos pagar apagar o que a gente tem aqui a gente tem o tuar vamos fazer

aqui em cima um nave bar Ó então aqui a gente pode fazer uma div com uma classe que eu vou chamar de nave top cart de carrinho certo aqui a gente vai colocar um link um HF apontando por enquanto para lugar nenhum aqui vai ser na verdade um voltar então a gente pode usar aqui uma classe de ícone que vai ser R Arrow a gente pode pegar lá do do detalhes lá ó o botãozinho de voltar aqui ó na verdade a gente pode copiar meio esses três aqui colocar depois a gente ajeita ó lá tem

os três botões aqui né mas o do meio não vai ser não vai ser um link esse do meio vai ser Vamos colocar um strong aqui e aqui a gente vai colocar carrinho a gente pode colocar um ícone de carrinho aqui pegar lá do remix aqui a gente pode colocar shopping pegar um item de carrinho aqui ó pegar esse shopping Kart aqui carrinho o ícone e lá no canto vai ser três pontinhos né esses três pontinhos o o o ícone é aqui vai ser esse aqui a gente pode copiar aqui aqui vai ser os três

pontinhos Beleza então a gente tem voltar o carrinho e os três pontinhos agora vamos fazer esse nosso nave top cart aqui e fazer a estilização dele né então a gente pode fazer aqui na top e aqui a gente vai colocar que vai ter o display Flex Vamos colocar aqui ele vai ter 100% da largura da tela Vamos colocar que ele vai ter o justify content como Space between que vai ficar um em cada canto ó já vai dar aquela formatação que a gente quer né o background dele vai ser a variável Branco Eh aí vamos

colocar aqui um pading um pad de 10 pixels em cima e embaixo zer pix esquerda e à direita beleza e aí agora a gente vai fazer os botões então a gente faz o nave cart Nav topart a né os links aí a gente pode colocar que o display vai ser Flex al itens Center justify content Center fic tudo caladinho a largura vai ser de 40 pi para ser o mesmo padrão lá do detalhes né 40 aí a gente pode colocar que a borda vai ser de um pixel sólida aí gelo e aí border radios 50%

para ficar redondinho show de bola né e a cor color vamos fazer Preto para ficar com os ícones escuros certo beleza aqui a gente ficou faltando o align item Center ó tá vendo que tá desalinhado aqui ó align item Center que é para alinhar no sentido assim né beleza show de bola e aí a gente pode fazer aquele esquema que a gente aprendeu até né para modificar Só Um item determinado a gente pode pegar aqui o nosso seletor e usar aqui o first shield né first shield para afetar só o primeiro então o primeiro a

gente vai fazer uma margem left de 20 pixs afastar um pouquinho aqui ó dessa pontinha e o shield a gente vai fazer a mesma coisa só que pro outro lado né o shield 20 pi ele ficar um pouquinho mais dentro legal show de bola Então a nossa parte de cima aqui tá feita né parte do carrin agora a gente vai fazer a parte propriamente dita do do nosso da nossa listagem aqui né nessa parte aqui a gente vai precisar fazer uma área geral que vai ser alimentada E aí cada um dos itens e dentro desses

itens a gente ainda vai ter subdivisões a gente vai ter a divisão aqui do lado que vai ter a imagem depois o lado onde a gente vai ter o conteúdo de texto e cada linha dentro né então a gente vai ter que fazer bem divididinho essa parte aí para ficar certo então vamos voltar lá no nosso carrinho e agora que a gente fez a parte do Topo a gente tem também aqui o Tool bar que depois a gente ajeita Vamos pro page content que é a parte do Miolo aqui né do que realmente vai ficar

dentro do carrinho aqui então vamos criar uma div aqui com um ID na verdade que a gente vai chamar de lista carrinho que vai ser tudo que vai ter dentro aqui da do nosso carrinho aqui dentro é onde a gente vai colocar as coisas certo então esse lista carrinho é lista carrinho vai ter o display do tipo Flex a gente vai fazer que o flex flow dele vai ser em coluna A gente vai querer pegar área total com invólucro rap a gente vai fazer uma margem do topo de 20 piels para afastar um pouquinho da

da área de cima e um pading bottom de 280 PI lá embaixo PR a gente compensar que o tab bar acaba tampando né a gente tá usando pading PR não ter que dar BR que nem a gente fez lá antes na parte do da página inicial né Beleza vamos fazer então agora parte de dentro cada um dos itens aqui né então a gente vai fazer assim ó então dentro de lista carrinho Vamos fazer um item né a gente pode colocar até aqui um comentário item do carrinho PR a gente saber do que se trata esse

elemento aqui então a gente vai fazer uma div aqui com uma classe item carrinho aí dentro desse item carrinho a gente vai ter a área da imagem Então a gente vai fazer uma div CL área IMG e aqui dentro vai ser Onde vai ficar a imagem então a gente pode colocar aqui IMG src MG default que a gente pode colocar a caixinha né Depois a gente ajeita isso daqui aí a gente vai ter além da área da imagem a gente vai ter a a área de detalhes então a gente pode fazer uma div Class eh

Área details e dentro dessa daqui a gente vai separar ainda em algumas partes então só para você entender a área da imagem é essa área aqui certo a área de Tails é essa área aqui aí a gente vai fazer a o superior o meio e a parte de baixo que vai tá dentro dessa área de teos aqui entendeu pra gente fazer uma fatia vamos dizer assim do conteúdo ali dentro então a gente pode fazer aqui uma div com a classe su de área superior que vai ser essa parte aqui ó onde vai ter o título

O fechar e aqui uma uma característica do produto certo aí nós vamos fazer depois a uma parte do meio então a gente pode fazer uma div com a Class que a gente pode colocar aqui chamar de Middle de meio né onde a gente vai ter ali o miolo e a gente vai ter uma última aqui uma última div que a gente pode chamar aqui de eh preço traço quantidade vai ser a parte de baixo né onde vai ficar os os itens da parte de baixo aqui essa aqui onde vai ficar o preço e o contador

certo então na parte de cima aqui na parte superior nós vamos fazer o seguinte aqui nós vamos colocar então um spam esse spam vai ser o nome do produto então aqui a gente pode colocar ass Xbox service x né e do lado nós vamos ter um um link né a HF volando para lugar nenhum e aqui a a gente vai colocar aqui o o nosso ícone de de delete né então a gente pode colocar e Class é MDI MDI close na verdade é um fechar é um xizinho né certo Por enquanto tá tudo uma bagunça

na verdade a gente já poderia ir organizando essas áreas aqui PR área de imagem área de detalhes já para ele ficar organizado né então vamos fazer o seguinte vamos voltar lá no nosso lista carrinho então a gente pode fazer aqui o IMG e fazer o item primeiro o item carrinho né Deixa eu ver aqui carrinho isso a gente fez o lista carrinho agora a gente tem que fazer o item carrinho certo então item carrinho e aqui a gente vai passar os atributos dele a gente vai falar que ele vai ter o display como sendo Flex

a gente vai alinhar os itens tudo ao centro a largura dele vai ser de 90% certo e a altura vai ser de 120 piels a gente pode colocar aqui um background Blue só para você ver a área que ele vai pegar ó Então tá pegando essa área aqui né para ele ficar Centralizado a gente pode dar um margem alto beleza e border a gente pode colocar a borda embaixo border Bottom um pixel Sid e aqui a gente vai usar o gelo para fazer uma divisó Zinha em embaixo certo isso aqui era só pra gente ver

a área né essa imagem pessoal ela tá assim muito grande porque a gente não especificou o tamanho dela ainda né então a gente pode fazer o seguinte a gente pode fazer a área ali das imagens então era área IMG nós vamos dizer que ela vai ter um Flex de 30% então 30% da área a gente vai pegar pra imagem o restante 70% vai ser pro texto tá então a gente vai colocar que a altura dela vai ser de 100% Vamos colocar aqui o display dela também vai ser Flex pra gente poder fazer os alinhamentos alinhar

os itens ao centro justificar os conteúdo ao centro também vamos colocar aqui o background vai ser o gelo vai gelo ó a área onde vai ficar a imagem ainda ela tá muito esticada porque a gente tem uma imagem muito al dentro mas já vamos ajeitar isso border Radi de 20 pi beleza ficou a reinha dela ali agora a gente vai ajeitar a imagem fazendo um área MG MG né pra gente determinar que o tamanho máximo dessa imagem Max Edit dela vai ser de 120 pi ó lá aí já vai enquadrar ali dentro e a altura

vai ser de 120 pi e a gente vai colocar um Object Fit aqui conté que é para ele sempre conter ali dentro o item certo agora a gente vai ter que especificar o tamanho da área aqui do do área de Tails né que é essa área aqui porque aqui por enquanto esse aqui tá bem maior do que a outra área porque a gente não determinou o tamanho do área de teos aqui né então a gente vai fazer isso agora área de taos a gente vai dizer que ela vai ter um Flex de 70% Olha lá

que legal aí já organizou Porque daí a gente determinou aqui que 30% é pra imagem o restante do área de Tails é 70% certo então a gente vai colocar aqui que vai ter um display também Flex a gente vai justificar o conteúdo ao centro e a gente vai fazer aqui um flex flow dele sendo em coluna então colum wrap a gente vai ter vários itens empilhados Certo certo e a altura o rate vai ser de 100% beleza agora Vamos ajeitar essa parte aqui ó ah do da linha superiora né que é essa parte aqui né

onde a gente tem o título e o xizinho esse sup aqui a gente vai precisar ajeitar isso aqui então vamos lá então sup na parte superior que que a gente vai querer a gente vai querer que ele tenha o edit largura de 100% só pra gente ver isso aqui vamos dar um background Vamos colocar aqui um head só pra gente ver ó já pegou 100% beleza Vamos colocar aqui o display vai ser Flex display vai ser Flex a gente vai fazer um flex flow de linha Row Wap ou melhor no Wap que a gente não

quer involucrar ISS aqui vai fudo na mesma linha certinho o align it vai ser Center e o justify content vai ser Space between PR gente jogar o x lá outro lado beleza show de bola então já ficou lá certinho o item a gente vai colocar uma classe agora aqui ó nesse nosso nome do produto Então a gente vai colocar name prod uma classe prod vamos fazer esse name prod name prod Vamos colocar que ele vai ter um fon weight mais grosso 600 mais um negritinho assim F size de 20 pixs um marg left de 15

pixs o máximo tamanho máximo del mait vai 20 pixels porque a gente vai especificar um tamanho máximo para esse nome que vai aparecer aqui a gente já vai ver um esquema aqui ó quer ver ó se eu colocar uma borda border um PX Solid Black para vocês entenderem a gente vai especificar um tamanho máximo que isso aqui pode ter conforme a o tanto de palavras que a gente tiver dentro do nosso carrinho aqui por exemplo se eu fosse Xbox x da Silva Sauro do além e avante olha só Aí tá vendo que ele tá tendo

essa quebra o que a gente vai querer na verdade é que isso aqui fica uma linha contínua que vai até lá ó até lá no outro canto certo então o que que a gente vai fazer aqui a gente vai dizer que a gente vai querer que White Space seja no Wap dessa forma ó ele vai ficar tudo na mesma linha só que olha a área tá vendo a área onde a gente tem a borda é a área que a gente diz que é o tamanho máximo que ele vai poder ter dentro aqui do nosso componente

certo que a gente determinou aqui que é 220 pixels Dá até para ser um pouquinho mais dá para ser um 240 mais ou menos ó dá para ser um pouquinho 250 ainda vai ó beleza aí a gente vai ter que limitar essa área onde vai ficar o texto se a palavra for muito longa certo pelo menos nessa nessa nesse tamanho de tela depois a gente pode usar uma mídia Carry né PR expandir para telas maiores não ter esse problema a gente vai fazer um overflow aqui ó PR ele não mostrar um overflow Hidden para ele

fazer o corte ali ó cortou E aí a gente vai usar o text overflow elipses para ele botar os três pontinhos né Ó lá aí ele limita a área onde vai ficar ali escrit as coisas né Essa borda aqui a gente estava usando só paraa gente visualizar o TAM isso claro itens aí muito gigantes né então a gente deixar aqui o Xbox ser x vai aparecer assim numa boa aí vamos fazer agora o o de deletar aqui né esse nosso botão a gente pode colocar it vamos fazer o noss it a pode colocar si aqui

Vamos aumentar o tamanhozinho da fonte dele vai ser 18 pixels para ele ficar maiorzinho vamos colocar aqui que a cor dele color vai ser a gente pode colocar aqui uma cor especial ó 9 e 9 e 9 e que é um cinzinha e vamos colocar uma margem da direita margem right de 10 pixels para ele ficar um pouquinho mais para dentro Beleza agora voltando lá no nosso HTML aqui no meio a gente pode colocar um que vai ser aqui o o item né tipo assim uma característica do item por exemplo 1 TB né Ó lá

um tb aí a gente pode colocar aqui a classe ó Middle seria o meio né o miolo ali spam Vamos colocar aqui a cor color vai ser Grey cor cinza e a margem left de ele vai ser de 15 pixels para ele ficar na mesma entrada do outro aqui né que a gente também tinha colocado ó nome do produto a gente tinha feito uma margem left de 15 também E aí agora a gente vai fazer lá a parte de preço quantidade né a parte de preço quantidade vai ser essa parte de baixo onde a gente

vai ter que colocar ó Conforme aqui a imagem ó vai ter que ser uma áre Zinha com o preço e uma área com esses botões de menos e um campinho pra gente colocar aqui vai ter um número e um botão de mais certo então vamos fazer essa parte aqui do preço quantidade aqui a gente vai colocar aqui então Primeira coisa um preço né então vamos colocar um spam eu vou colocar aqui um valor qualquer 9500 99.500 í o valor do do bagulho e aí a gente pode fazer uma div aqui com uma classe que a

gente pode chamar de Count que é que é o contador e dentro a gente vai ter primeiro um link vamos apontar para lugar nenhum né vai ter a classe vai ter um menos vai ser um botão de menos a gente vai ter um outro que vai ser um botão de mais então a aqui a gente pode colocar classe é minos aqui outra a gente pode fazer Plus então menos e mais e no meio diss daqui a gente vai ter um campo input do type text que vai começar com o valor em um por padrão foi

atéa pro canto né e a gente pode colocar aqui uma classe nele e a gente pode chamar de qtd item que é a quantidade do item certo beleza então a gente Sumiu os nossos botão lá mas nós já Vamos ajeitar isso aí então lá no preço quantidade nós vamos fazer o seguinte a largura del oit vai ser de 100% pra gente enxergar isso a gente pode colocar aqui um background Blue pra gente ver a área né aqui a gente vai colocar um display como sendo Flex podemos colocar o Aline itens Center o justify content Space

[Música] between e vamos deixar tudo isso em linha vamos usar um flex flow Row no wraap não quebrar linha e agora vamos determinar os tamanhos aqui ó a desses itens aqui então a gente tem um spam que vai ser aqui onde a gente vai querer que tenha o número e a gente tem um count que é o contador que a gente vai querer que fique no outro canto né então a gente pode fazer da seguinte forma isso daqui o nosso preço quantidade spam que é onde a gente tem ali o o valor a gente vai

querer que tenha um Flex de 50% e o display dele também vai ser Flex a gente vai alinhar os itens ao centro o justify content dele vai ser Flex comear no começo meso né E a gente vai ter o noss quantidade div né que deixa eu ver aqui que a gente chamou de Count né chamar de Count vai ter um Flex de 50% também vai ter um display do tipo Flex vai ter um Aline itens como sendo Center e um justify content um sendo Flex start beleza aí já ficou organizado ali os nossos iten zinhos

né a gente pode tirar esse background Blue que a gente tava vendo por que ele tava lá no canto pessoal sumido porque a gente não tinha especificado os tamanhos corretamente aqui do Flex e também a área que eliz um t então ele acaba pulando para lá uma vez que a gente colocou os alinhamentos de tamanh certos aí eles já se ajustam aqui certinho para nós né então nós temos aqui o preço nós já temos a área aqui vamos dar uma ajeitada agora para ficar parecido com isso daqui né pessoal tá bem nada a ver aqui

ó tem que o preço ficar maior e os botões ali esse campo input precisa ficar mais organizadinho né então vamos fazer assim nosso botão de menos que a gente colocou a classe lá de minos vai ter um display Flex alinhamento ao centro justify content Center o tamanho dele vai ser de 30 pixs por 30 pixs então heate altura e o rate vai ser do mesmo tamanho a gente pode colocar que ele vai ter uma cor cinza color Grey um background a gente vai colocar Branco uma borda de um pixel sólida a gente vai colocar aqui

gelo e a gente vai fazer um border radios de 5 pixels para ele ficar arredondar o tamanho dessa fonte então fonte size 20 pixels para ele ficar um pouquinho maiorzinho Beleza o botão de mais que é o Plus vai ser a mesma coisa então a gente copia esse aqui cola aqui Plus só que no lugar do background Branco a gente vai colocar o background verde e a cor aqui da do texto Vai ser branco Ó lá beleza só que daí o background Na verdade ele vai ser branco também né e a borda que vai ser

verde e a cor vai ser verde aqui eu confundi tudo verde isso dessa forma aqui Show Beleza e o campo input que é o do meio aqui ó primeiro que ele tem que ser somente leitura né então a gente pode colocar aqui ó ele vai ser read only somente leitura daí a pessoa não tem como alterar os valores aqui dentro certo e a gente vai ter que também e alterar ele então aqui vamos colocar lá o nosso quantidade de item que é o aqui o nosso campo input primeiro que ele vai ter uma largura aqui

de 30 pixels também ele vai ser pequenininho Vamos colocar que ele vai ter um pading left Eh vamos colocar um text align text align Center pro texto ficar bem no centro ó o unzinho aqui né E a gente vai dizer que ele vai ter um background background Branco ar branco aqui vamos dizer que é important aí ó beleza e aqui no nosso preço antes a gente faltou a gente pôr aqui ó aqui ó preço quantidade spam aqui ficou faltando a gente colocar um tamanho um pouquinho maior de fonte né Fonte size Vamos colocar uns 15

pixels ó para ficar um pouquinho maior Vamos colocar aqui um um Font weight mais escurinho mais né 600 e vamos dar uma margem left de 15 pixels né que ficou faltando aqui ele ficar mais alinhadinho legal joia deixa eu ver aqui esses botões eu acho que meio engraçado isso aqui né deixa eu ver a gente chegou a fazer o preço quantidade deixa eu ver preço quantidade a gente faltou fazer aqui alinhamento ao centro Space between tá certinho porque dá uma certa impressão de que ele tá meio desalinhado aqui né Deixa eu ver se eu aumentar

um pouquinho o tamanho dessa fonte aqui 20 pixels é 18 pixels tá bom né mas esse nosso campo input Parece que ficou muito grande beleza mas tá Depois a gente qualquer coisa ajeita isso aqui né ó porque ficou ficou realmente meio grandote isso aqui né Deixa eu diminuir um pouco para ver aqui 20 pixels 10 pixels engraçado ele não muda isso aqui colocar um important aqui é colocar aumentar a largura disso aqui 50 pixels aqui 50 pixels aqui beleza isso aqui é frescuragem né aqui é o nosso a nossa aqui ó deixa eu ver o

item item carrinho aqui a gente tem Podia colocar aqui uma um pading 10 pixels em cima e embaixo zer pixels na esquerda e na direita para dar um certo afastamento Zinho aqui beleza tá joia tá legal né né pessoal já tá bem interessante isso aqui depois a gente logicamente vai fazer isso aqui ser dinâmico Fun n mas de parte estética que tá bem legalzinha essa parte aqui né a gente pode até colocar um outro aqui fazer uma cópia pra gente ver como é que vai ficar com mais de um item né aqui a gente tem

um item do carrinho eu recolhi aqui no cantinho vou copiar e vou colocar mais um item no carrinho aqui ó pra gente ver como é que vai ficar com vários itens legal show de bola aí precisamos fazer agora a parte de baixo aqui ó então a parte de baixo a gente vai ter um botão de comprar né um botão verde e a gente vai precisar ter mais um outro Tab bar aqui PR essa parte de total né e frete e tal vai ficar um pouquinho mais para cima aqui a gente vai precisar de dois aqui

um que vai ficar o botão que a gente já tem um lá embaixo e um outro que a gente vai querer ficar um pouquinho mais para cima desse então a gente tem aqui ó Tab bar a gente tem o botão aqui adicionar o carrinho né a gente pode até tirar esse outro aqui que a gente tinha um valor e a gente pode fazer aqui ó um Flex 100 criar essa classe e aqui a gente coloca aqui ó Flex 100 Flex 100 E aí você pode colocar assim que vai ser Flex 1 Flex 1 é de

100% certo então aqui ficar certinho assim deixa eu ver se coloca um margem alto text Center isso aí já para deixar o botão ali alinhado ao centro a gente usando text Aline como a gente tá tratando aqui do botão como sendo um botãozinho aqui aí dá pra gente alinhar usando essa esse aqui né E aqui vamos lá o tic Teco já tá fritando aí se você tá acompanhando eu desde o começo o teu também deve tá né O meu já tá desgastado aqui então vamos vamos terminar isso né ainda falta a gente botar a lógica

aqui da coisa a gente tá só terminando aqui a parte visual né Vamos colocar aqui comprar vou colocar um emoji aqui ó comans ó comprar show de bola e a gente vai fazer mais um bar agora vamos colocar um outro só que esse aqui nós vamos subir ele um pouquinho mais PR cima a gente pode colocar até direto aqui nele ó um estilo que a gente pode colocar assim ó margem Bottom margem de baixo a gente pode dar al uma 160 pixels para ele subir ó beleza aqui a gente para ver a background head aqui

para ver a área que ele vai ocupar a gente pode colocar assim deixa eu apagar aqui três pontinhos então ele vai pegar essa área aqui ó tá vendo um pouquinho mais para cima eu botei o background head Engraçado que ele não ele não obedeceu aqui mas não tem problema eu queria ver a área que ele ia ocupar né então aqui dentro a gente vai colocar os totais né os valores ali do Quanto que deu subtotal FR né a gente vai colocar aqui dentro pode fazer umae Flex é espaço ent né Falo fechamento dessa div e

aqui a gente vai colocar o valor assim subtotal Então vamos colocar isso dentro de um spam subtotal e um outro span que vai ser o valor então R 800 certo subtotal R 800 e aqui a gente pode colocar uma classe Vamos colocar w80 que é de Edit 80 a gente pode criar aqui ó w80 e a gente pode colocar aqui o edit dele vai ser de 80% da área ó aí vai ficar bem joia ó subtotal e o outro fica lá no outro cantinho podemos fazer mais um desse aqui que vai ser na verdade o

frete né frete e a gente pode colocar que o frete é de 10 mangos aí eles ficaram tudo na mesma linha pra gente tirar isso tudo na mesma linha a gente pode colocar aqui um ID para esse nosso tob a gente pode chamar de totais e aqui embaixo a gente pode fazer assim totais a gente vai fazer aqui o Flex Direction dele vai ser coluna dessa forma vai ficar um embaixo do outro certo e a gente pode fazer um e pading né uma separação aqui ó pading de o pixels em cima e embaixo zero pixels

esquerda e direita para ele dar um certo afastamento podemos criar uma classe aqui que eu vou chamar de border gelo vai ser border Bottom ou vou colocar bd bd Bottom um pixel Solid gelo aqui para colocar um cinzinha e a gente coloca essa classe aqui no nessa Nossa div aqui ó só para ter um tracinho aqui a gente pode dar um margem top para ela dar uma afad lá da parte de cima certo beleza na verdade dá até para diminuir um pouquinho esse esse Tab bar aqui ó aí Vamos diminuir um pouquinho mais 110 show

então vai ficar assim subtotal frete né nessa parte aqui a gente pode deixar Então esse aqui a gente pode usar uma classe bold aqui ó de a gente já tinha até feito já né dos valores beleza e aqui nesse aqui a gente pode colocar bord bot ó show de bola né pessoal bem legal mesmo até diminuir um pouquinho mais ó S ficar assim ó subtotal frete beleza e aqui os itens aí a gente tem aqui nesse cantinho pessoal um botão que a gente vai querer que quando Clique nele que abra opção de tipo um balãozinho

né de esvaziar para esvaziar ele aqui como que a gente faz isso então se você entrar lá no Framework S na documentação a gente vai ter aqui ó uma um componente que se chama popover esse popover é esse balãozinho aqui ó deixa eu fazer um exemplo para vocês ó clicou aqui ele abre esse balãozinho Android vai ficar dessa forma aqui ó esse tipo de balãozinho como é que você faz para usar ele no link onde você vai querer o clique você vai colocar data popover e apontando uma classe né E você tem que ter aqui

ó classe link popover e um atributo data popover apontando para item que vai ser esse popover Então a gente vai encontrar aqui esse nosso botão tá aqui ó Então a gente vai colocar aqui essa classe link popover Open apontando que a gente vai querer abrir o data popover chamado popover menu aqui deu né E aí a gente vai pegar agora lá no nosso Framework s e pegar esse popover que é o popover menu que vai estar aqui ó vamos achar ó popover menu que é todos esses itens aqui menos o última div que essa última

div ela diz respeito à então a gente pode colocar logo aqui abaixo esse popover menu e aqui a gente vai ter só uma linha que vai ser o esvaziar né a gente pode colocar aqui esvaziar carrinho e aqui a gente pode colocar um lá do material design ions TIP de uma vassoura matei não escrevi matei í material design icons aqui você procura por Brom Brom aqui ó que é essa vassourinha aqui então é esse daqui ó MDI MDI Brom certo pegar esse aqui deixa Pular linha aqui para ficar mais fácil da gente visualizar esvaziar e

aqui a gente vai colocar aquele ícone né só vou trocar aqui de spam para ícone esvaziar carrinho certo então feito isso a gente vai ter aquele efeitinho do popover lá do Framework 7 ó a gente clica aqui ó lá esvaziar carrinho e aí quando clicar a gente vai depois disparar um evento aqui a gente pode colocar um ID que é esvaziar a gente vai disparar um evento aqui de esvaziar carrinho certo aqui também outra coisa que eu vou querer fazer pessoal é o efeito que de abertura desse desse carrinho porque se a gente for ali

no Framework 7 a gente for aqui em hoter View api a gente vai ter aqui Custom page transition a gente vai querer que quando vá da página inicial para o carrinho ele usa uma transição que vai ser deixa eu ver aqui que eu quero é essa daqui ó push essa daqui ó que é de tipo ele deslizar como se ele tivesse indo pro lado tá vendo pra gente usar isso a gente precisa passar essa option transition E aí colocar Qual que é a transição que a gente quer no caso é F7 push Então a gente

vai lá na nossa rota vamos achar lá onde a gente tem a nossa rota lá embaixo do carrinho aqui onde a gente tem esse animate que agora não funciona mais dessa forma a gente vai colocar essa option passando que a transição a transition a gente vai querer que seja push Então sempre que for fazer a transição para essa rota vai fazer esse efeito certo e agora a gente vai fazer o seguinte eu vou tirar aqui ó já para ir direto para lá na nossa index que tá navegando direto pro carrinho e eu vou querer que

lá na nossa index quando a gente clica aqui no carrinho de compras é que a gente vai para lá só pra gente ver se tá funcionando legal então a nossa index vamos achar index HTML onde a gente tem o nosso top nave tá aqui Então a gente tem aqui o nosso btn cart que é esse aqui do carrinho Então a gente vai mandar ele para a nossa rota de carrinho certo clicou aqui então foi pra nossa rota de carrinho viu o efeito que legal que maneiro e lá no carrinho a gente tem que fazer esse

botão fazer voltar né então aqui a gente tem nave top cart index tá clicou aqui voltou lá pra nossa index então clicou voltou pro carrinho clicou voltar voltou pra index legal Dá pra gente fazer é também a nossa index ter esse efeito de push né para ficar e deixa eu ver aqui que que a gente tem mais de efeito lá no Framework 7 push é então a gente pode pôr aqui também no nosso essa transição option transition Push colocar lá na nossa index pra gente ver como é que fica o efeito de transição clicamos aqui

foi pro carrinho clicou aqui voltou é ficou aquilo tudo não né porque ele vem do outro lado assim ó então acho que não fica tão legal assim dessa forma vou deixar quieto isso daqui vou apagar puxar assim clicou beleza voltou legal beleza então com isso nós terminamos aqui a parte estética do nosso app Finalmente né depois aí de longas horas aí fazendo né nem sei quantas horas já deu isso daqui mas foi bastante né mas tá sendo bem interessante a gente fez a parte mais difícil entre aspas que é a parte estética mesmo você conseguir

tirar n Pensa nós conseguimos tirar a ideia do papel aqui do visual e transformar isso em algo real rodando na tela do celular isso é o verdadeiro frontend né então a gente tem aqui a nossa pagin Zinha Inicial e a gente tem aqui a página de detalhes e a página de carrinho que a gente também fez né ah acabei de ver aqui um detalhezinho que a gente acabou esquecendo que era aqui do botão de categorias o primeiro tem que tá marcado ativo né Ó lá primeiro tem que tá marcado assim ó dessa forma isso aqui

ficou faltando Então deixa eu achar aqui na nossa index mesmo a gente tem os onde a gente tem aqueles botões das categorias né Deixa eu ver aqui busca swiper swiper Filter btn É esse aqui então aqui ficou faltando o o que tiver ativo né fazer assim ó Filter btn ponto Active o que tiver ativo vai ter o background dele como sendo verde e a cor color var branco e border beleza aí sim ó agora ficou certo então o botão que tiver ativo ele tem que ficar dessa forma aqui né marcado que tá tá ativo dessa

forma aqui tava faltando esse detalhe aqui beleza então temos aqui os itens nós temos aqui para navegar temos aqui a nossa sacolinha carrinho né e agora vamos fazer então a parte lógica aqui para concluirmos o nosso projeto se você quiser continuar assistindo essa série assiste o próximo vídeo aqui ó clicando aqui no lado e se você quiser aprender mais sobre como criar aplicativos conhece o meu curso completo de desenvolvimento de apps forte abraço e até a próxima valeu