Ultimate Next. js 14 Site de portfólio 2024 ( Zero ao herói )

1. Vídeo de anúncio real: Dê uma olhada neste lindo site. Tudo está codificado com o próximo s. Foi meticulosamente e profissionalmente criado para Então, não seria incrível se você soubesse exatamente como criar e codificar este site do zero? Aqui é exatamente onde eu entro. Olá, bem-vindo e muito obrigado pelo interesse em meu curso. Neste curso, ensinarei como criar o site definitivo do portfólio Next GS, usando diferentes tecnologias, como next es react Jes, tear wind e node mailer Então, se você é novato, não se preocupe. Vamos começar do zero, explorando cada conceito incorporado no núcleo do próximo quadro GS. Então, abordaremos tópicos como o roteador, que inclui a próxima rota, a rota dinâmica, a próxima rota dinâmica e captura de todos os segmentos Além disso, tópicos como busca de dados, rota privada, colocação de arquivos, carregamento, layout e assim por diante Não nos equipamos com todos os conceitos. Podemos então continuar a criar o site definitivo do portfólio Next S. Durante este curso, ensinarei como estruturar o site, como usar componentes de design e padrões de layout comuns e, para finalizar, seguiremos as melhores práticas do setor para criar nosso site. Portanto, faremos com que nosso site seja responsivo em dispositivos móveis e depois otimizaremos para um melhor desempenho Por fim, implantaremos o site em um servidor ativo, o que simplesmente implica. O site do seu portfólio estará acessível na Internet. Assim, você pode usá-lo para mostrar seus trabalhos aos seus clientes ou empregadores Então, se você está procurando um curso abrangente, fácil de seguir, bem organizado e fácil de seguir, bem organizado e prático que o levará do zero até aqui. Este é o melhor próximo curso para você. Parece bom, certo. Junte-se a mim e vamos começar. 2. Nextjs intro 001: O Next S é uma estrutura de reação para produção. E agora a questão é: é exatamente a diferença entre o próximo S e o React Gs? React S é simplesmente uma biblioteca JavaScript para criar interfaces de usuário. E eu quero que você pense em uma biblioteca como um pacote criado para resolver um problema específico. React, sendo uma biblioteca, está focado na criação de interfaces de usuário interativas. Isso é exatamente a única coisa que react es faz como biblioteca. Portanto, você não pode usar react Gs para realizar roteamento e Httpic. Já uma estrutura é uma solução completa. Portanto, o próximo gás como estrutura pode ser usado para causar efeitos e também para realizar o roteamento, o que simplesmente implica que você pode usar o próximo gás para criar um aplicativo completo. Ensinar bem. Linda. Não entendi a diferença entre next as e react es. Na próxima palestra, prosseguiremos com a criação de um novo aplicativo S. 3. 02 instalações de nós: Nesta seção do curso, faremos algumas instalações necessárias para começar. Na verdade, é um pré-requisito ter o nó S em execução em sua máquina antes de instalar o próximo gás No entanto, incentivo cada um de vocês a baixar e instalar a versão estável mais recente. Esse aqui na extremidade esquerda da tela. Portanto, por favor, não instale esse cara no lado direito da tela, simplesmente porque ele vem com complexidades extras que você talvez não consiga imaginar Vamos baixar e instalar rapidamente a versão estável mais recente. Aqui está. Está sendo baixado. Download, bem-sucedido. Vamos abri-lo na pasta de download. Clique para instalar. Tudo bem Portanto, antes de prosseguirmos, também precisamos sair desse diretório aqui. E agora ficamos sem aplausos. Vamos continuar. Assim, você pode examinar todas as coisas, se tiver tempo Mas para mim, eu só tenho que continuar. Concordo. Está no botão de instalação. Se você for Mc, com certeza ele solicitará sua senha. Mas se você estiver trabalhando no Windows , será uma instalação expressa, então você não precisa de nenhuma senha. Agora, vou digitar minha senha. Instale o software. A instalação está em andamento. Instalado, com sucesso. Vamos fechá-lo. Deseja manter os acenos após a instalação ou movê-los para o lixo Vamos movê-lo para o lixo. Agora, vamos abrir o conjunto b pressionando o comando e a barra de espaço Você só precisa de s para o terminal. O que vamos fazer é verificar a versão que instalamos. Eu vou fazer Node Space, V. Deixe-me ver se consigo ampliar um pouco. Tudo bem Eu posso ampliar, na tecla enter, e agora temos essa versão do node instalada. Linda. Agora terminamos a instalação. Na próxima palestra, prosseguiremos com a instalação do código VS. Isso está desligado agora. Nos vemos na próxima palestra. 4. 3 instalações vsc: Olá. Bem-vindo de volta à aula. Na palestra anterior, instalamos o nó GS Agora, nesta palestra, vamos prosseguir com a instalação do editor de código Sinta-se à vontade para usar qualquer editor de código de sua escolha. Mas para mim, o código VS é sempre meu favorito. Eu encorajo você a baixar o código VS. Simplesmente porque, ao longo do tempo compartilharei com vocês algumas dicas e truques que acelerarão o processo de desenvolvimento. E, com certeza, quero que todos vocês acompanhem. Parece bom, certo. Linda. Acesse rapidamente o code vistudio.com e esse componente será aberto bem na sua frente Agora vamos cantar. Na extremidade esquerda da tela, temos o código VS para Windows e, no centro, para o Obuntu e outras coisas Por fim, na extremidade direita da tela, temos para Marc Aqui, estou no Mac, então com certeza vou baixá-lo para Mac. Mas se você estiver trabalhando no Windows, você também precisa baixar este aqui. Essa. Você tem que baixar este. Mas agora, eu quero baixar este aqui para Marc Então, se você estiver usando o Mac junto com ele, poderá baixar rapidamente o céu. Clique para fazer o download. Vamos verificar o processo de download. Você pode ver que o Visual Studio Code já está sendo baixado. O download definitivamente demorará um pouco. Então, eu só tenho que acelerar a palestra. Download, bem-sucedido. Vamos abri-lo com o botão Vamos rapidamente no Zip. Estrondo. Aqui está. Embora eu já o tenha na minha máquina, é por isso que você pode ver a duplicata aqui Este é o que eu estou usando anteriormente, e este é o novo que acabei de baixar. Você pode clicar para abrir. E aqui está. H. Isso está desativado agora e, na próxima palestra, iremos instalar algumas das extensões necessárias Essas extensões são extremamente importantes porque as usaremos no futuro. Então, por favor, não pule a próxima palestra. 5. 4 extensões vsc: Portanto, nesta palestra, iremos instalar as extensões que serão usadas para facilitar as coisas no futuro Então, primeiro, temos que sair da página de notas de lançamento. Tudo bem No canto médio esquerdo da tela, você verá a extensão. Aqui está. E eu passo o mouse, você vê as extensões à direita. Clique para abrir. Dentro da caixa segura, vamos procurar por E seven react ou Snipe Então eu vou fazer E seven plus React slash red Dox slash react E aqui está. Clique para abrir. Eu já o instalei no meu código VS, e é por isso que você pode ver o bumbum desinstalado Ao seu lado, o botão de instalação será ativado. Então, tudo o que você precisa fazer é clicar na extremidade instalada. E então você terá esse trecho poderoso instalado. Esse trecho é extremamente poderoso porque o usaremos para gerar algum código de componente funcional do React sem precisar digitá-lo do zero Agora vamos voltar para a referida caixa. Agora temos que instalar o script Java e digitar o script todas as noites Javascript e texto datilografado todas as noites. Vamos diminuir um pouco o zoom. Espero que você possa ver claramente. Você pode ver na placa de instalação? A instalação está em andamento. Instalação bem-sucedida. Então, temos que fechá-lo. Outra extensão poderosa é o tail wind intellisense. Portanto, essa inteligência ajudará a mostrar o CSS equivalente à classe utilitária de vento traseiro quando você passar o mouse sobre ela Não se preocupe, tudo isso pode parecer complicado, mas no futuro, você definitivamente entenderá a essência Então, vamos instalar. Para enrolar o intellisense. E aqui está. Parece que eu já o instalei. Novamente, do seu lado, se você não o tiver instalado, verá o botão de instalação. Tudo o que você precisa fazer é quebrar a barra de instalação e tudo ficará bem com Novamente, se esta é a primeira vez que você trabalha com T wind Css, quero que você se anime, porque explicarei cuidadosamente cada classe de utilitários eólicos T. Parece bom, certo. Linda. 6. 5 instalação do Nextjs: Bem-vindo de volta à aula. Nesta palestra, continuaremos criando nosso primeiro aplicativo Next as Volte para a área de trabalho. Dentro, clique com o botão direito do mouse em nova pasta. Vou chamar essa pasta. Próxima prática de Ys. Observe que, ao nomear seu projeto, sempre use um nome descritivo que descreva a intenção do projeto para que você possa se relacionar com ele facilmente no futuro Não criei a pasta. Abra rapidamente seu código VS. A próxima linha final é arrastar e soltar a pasta no código Vas. Vamos maximizar rapidamente. Ok, temos que dar alguma permissão aqui, e então vamos parar de trabalhar na página. Contra bático para abrir o terminal integrado do código VS. E aqui está. E, a propósito, a barra está localizada no canto superior esquerdo do teclado logo abaixo da tecla escape. E se você não puder fazer isso com o atalho, tudo o que você precisa fazer é ir ao menu superior e depois ao terminal, novo terminal E então a janela abaixo será aberta. Agora, para criar um novo aplicativo Jz seguinte, vamos seguir o comando E aqui está. P X, crie o próximo aplicativo e, em seguida, você fará o mais tardar. Para copiar o comando, você precisa clicar neste ícone de cópia. Volte para o código VS e , em seguida, comande V para colar. O que vou fazer agora é espaçá-lo e depois fazer. Isso ajudará a instalar os próximos Js diretamente na próxima pasta de prática de JS. Está na tecla enter para ativá-lo. Novamente, pressione a tecla enter para continuar. Você gostaria de usar o script de tipo? Claro que sim. Você gostaria de usar yes lint? Claro que sim. Você pode alternar entre sim ou não, usando a tecla de seta para a esquerda ou para a direita. Você gostaria de usar gêmeos? Sim Você gostaria de usar o SRC Sim, A. Sim. Quase tudo vai ser sim. Você gostaria de usar o Import? Queremos que tudo esteja completo. Eu vou com a opção sim. Por fim, pressione a tecla enter. Instalado, com sucesso. Vamos lançar rapidamente nosso projeto na web. O que eu vou fazer agora é PM, Ron Dev. Simples isso. E depois na tecla enter. O projeto será executado na porta 3.000 do Localhost e, para abrir o projeto, tudo o que você precisa fazer é pressionar o comando ou a tecla de controle no teclado e clicar no link E na tela está nosso primeiro próximo aplicativo GS. 7. 6 Nextjs BoillerPlate: Tudo bem. Bem-vindo de volta à aula. Na palestra anterior. Aprendemos como criar e executar um próximo aplicativo GS básico. Agora vamos nos aprofundar nos arquivos do projeto e estrutura de pastas para entender como tudo funciona quando executamos nosso aplicativo. Vamos continuar com o arquivo JS do pacote. Contra Baci para fechar o terminal. Comando B ou controle B para abrir o explorador de código do VS. Dentro do Explorer, você encontrará o arquivo dot JN do pacote, e aqui está. Linda. Dentro do script, temos o Dave para executar nosso aplicativo no modo de desenvolvimento Em seguida, vem a compilação, que é usada para criar o aplicativo e prepará-lo para implantação em produção. O script de início é usado para iniciar o servidor de produção do aplicativo. O lint é usado para configurar o próximo GS embutido na configuração S lint. E para as dependências, temos react react dome e next GS Portanto, temos a versão 18 do react instalada e, em seguida, temos a próxima versão 14.0 0.1 Então, no momento da gravação, esta é a versão mais recente. Abaixo, temos as dependências de desenvolvimento. Obviamente, temos o script de tipo e os tipos, e aqui temos os links post CSS, tailwind, ES e assim por diante Então, vamos fechá-lo rapidamente. Novamente, dentro do Explorer, temos o arquivo Package Lock Dot JN. Esse arquivo garante a instalação consistente de nossas dependências Logo acima, temos que é ignorado, o que é útil para o controle de versão. E abaixo, temos o arquivo yd dot MD. O yd me dot MD é uma documentação que contém instruções relacionadas à execução, criação e implantação do aplicativo E temos os próximos pontos do ambiente. Consiste em uma declaração datilografada para o próximo gs. E qual arquivo, novamente , temos que discutir? Vamos falar sobre os figos do next.com . E aqui está. Temos os próximos figos. Também temos as configurações ts logo abaixo. Além disso, temos o post css fig para configurações t wind. Passando para o topo, temos o diretório público, e aqui está. A pasta pública contém todos os ativos estáticos a serem salvos, incluindo as imagens e os SVGs Quando estamos criando um aplicativo de recompensa, todos os SVGs que vamos usar serão importados dentro desse diretório público. Feche isso. A próxima linha é o SRC, que é o pacote fonte Ao clicar para abrir, você verá o aplicativo e, dentro do aplicativo, temos o ícone Cinco, e aqui está. Deixe-me mostrar na tela, e aqui está o ícone cinco, salvando como logotipo. Vamos fechá-lo. Aqui está o CSS global, que é muito útil quando você deseja estilizar várias seções no aplicativo Abaixo está o ponto de layout TSS. O ponto de layout TSS é o contêiner principal de todo o próximo aplicativo GS Finalmente, temos o page.tss. O TSS de pontos da página entrará no layout raiz como filho. Deixe-me te mostrar. Então, tudo o que você tem aqui, entrará no layout quando crianças. Você pode ver? E aqui está. Quando chega aqui, o que aparece dentro da tag é renderizado na tela, exatamente assim Então, tudo dentro da página faz TSS. Você pode ver que temos a tag P que diz começar editando. Ao voltar ao navegador, você verá como começar a editar. Isso é possível simplesmente porque a página do TS é passada para o layout principal como filha. Mais simples assim Agora, conseguimos entender o fluxo de controle de uma próxima aplicação GS. O próximo passo é limpar o código. Vamos fazer isso na próxima palestra. 8. 7 Limpeza de código: Nesta palestra, vamos continuar limpando o código Navegue até a página Ts. Logo dentro, vamos destacar das linhas cinco às linhas 111. Então, queremos limpar tudo para começar do zero. Limpe-o. P. O aplicativo está reclamando simplesmente porque retornará a interface Vamos ter um D aqui. Salve o projeto. Ao verificar a recarga do navegador, você verá uma tela vazia Volte para o código VS. Agora temos que abrir o CSS global. Ele está localizado na fonte, no aplicativo e, em seguida, no CSS global. Ao clicar para abrir, você verá o CSS que geramos quando criamos o aplicativo MPX O que vou fazer agora é destacar as linhas cinco. Opa. Dê uma olhada. Tudo bem. Destaque e, em seguida, desça até as linhas 27. Limpe-o. Ao salvar, confira o navegador e bombardeie. Você pode ver? Agora, conseguimos remover tudo o que não queremos Temos que começar do zero. Então, vamos criar o aplicativo do zero. E isso é extremamente bom para você. Eu sei que você pode estar se perguntando por que não excluímos essa configuração dw aqui É simplesmente porque se você quiser Me of tail wind, essa configuração deve ser incluída. Então você tem que deixar exatamente do jeito que está. Quando você salva, e novamente, temos uma tela vazia. Isso está desligado agora e, na próxima palestra, falaremos sobre o sistema de roteamento no próximo GS 14 9. Roteador de aplicativos (sistema de rota no Nextjs 14 ): Nesta palestra, discutiremos o sistema de roteamento no próximo GS 14 Então, vamos falar sobre o roteador de aplicativos. Em seguida, implemente técnicas de roteamento baseadas em sistema de arquivos, nas quais a web part UR na guia do navegador seja controlada pelas pastas de arquivos em sua base de código Parece estritamente correto. Não se preocupe, quando começarmos a praticá-lo, você definitivamente o entenderá bem o suficiente Anote esse ponto chave. No próximo GS 14, quando uma pasta é criada dentro do diretório do aplicativo. Essa pasta se torna automaticamente uma rota quando um page.ts ou um ponto S de página é criado nela Seguindo a próxima convenção de roteamento e 14, para implementar uma rota, você definitivamente precisa criar uma pasta dentro do diretório do aplicativo Vamos supor que estamos criando um site de recompensas, onde precisamos de uma página de contato e uma página de perfil. Comum B para abrir o Explorer. Ganhe o diretório do aplicativo, clique com o botão direito do mouse e depois em nova pasta. Vamos chamá-lo de contatos, assim como esses. Outra, dentro do aplicativo, clique com o botão direito, nova pasta. Este será um co-perfil. Feito isso, vamos dar uma olhada no navegador para ver se é roteável Volte para o navegador e aqui vou fazer Localhost Pot 3.000 Quando você clica no entaky, ele diz que retorna uma 44ª página encontrada. Você sabe por quê? É simplesmente porque temos que criar uma página do TSS ou gs dentro da pasta de contatos É exatamente quando essa pasta se tornará uma rota. Clique em novo arquivo. E vamos fazer o Page TSS. Dentro do RFC para gerar o componente funcional de reação. Página de contato. Você pode usar uma tag H one se quiser. Dê uma olhada. Agora, ao verificar o navegador, você verá a página de contato. Vamos rotear a página do perfil. Vou fazer Localhost than profile. Quando você pressiona a tecla enter, ela retorna uma página 404 ernaut encontrada. Acho que agora, você deve saber exatamente o que fazer do seu lado. Publique o vídeo e implemente a rota do perfil. Deixe-me ajudá-lo com isso. W no diretório do perfil , clique com o botão direito do mouse em novo arquivo, e vamos chamá-lo de page dot TSX Simplesmente porque estamos usando script de tipo. É por isso que vamos usar a extensão dot TSS. Pressione a tecla enter, novamente, RFC para gerar o componente funcional de reação Aqui, eu vou fazer a página de perfil. Vamos implementá-lo dentro da tag H one. Corte isso, coloque-o dentro e desosse. Tudo bem. Salve no navegador, você pode ver? Agora, a página está visível. Você pode dar à tag Hadron um nome de classe e, em seguida, vamos fazer o texto nove do Excel Essa classe utilitária de vento traseiro significa simplesmente que estamos aumentando o tamanho da fonte até seu RM. Quando você vê e confere o boom do navegador. Você pode ver, fica muito ousado assim. Agora, é exatamente assim que se implementa o roteamento no próximo S. Também podemos rotear para a página de contato, exatamente assim e pronto. Você pode ver? Anote esses pontos-chave. As rotas são associadas aos arquivos com base no nome das pastas contidas no diretório do aplicativo. Um ponto de página Ts dentro da pasta de contatos será mapeado para o contato de barra, e um ponto TSS de página dentro da pasta de perfil será mapeado para o perfil de barra É por isso que quando você vem aqui e corta o contato, você acessa a página de contato Na verdade, podemos dar a ele uma cor de fundo, para que você entenda do que estamos falando. Aqui, vamos dar o nome da classe SVA. Então, dentro do nome da classe, vamos fazer uso da classe utilitária PG yellow 500. Quando você salva e verifica o navegador, aqui está a página de contato. Em resumo, cada pasta no diretório do aplicativo corresponde a um segmento de URL, quando uma página com uma extensão de ponto TS ou GS é criada no ensino de Good. Linda. 10. Rota Nexted: Nesta palestra, discutiremos o sistema de roteamento no próximo GS 14 Então, vamos falar sobre o roteador de aplicativos. Next GS implementa técnicas de roteamento baseadas em sistema de arquivos, nas quais a web part UR na guia do navegador é controlada pelas pastas de arquivos em sua base de código Parece complicado, certo. Não se preocupe, quando começarmos a praticá-lo, você definitivamente o entenderá bem o suficiente Anote esse ponto chave. No próximo GS 14, quando uma pasta é criada dentro do diretório do aplicativo. Essa pasta se torna automaticamente uma rota quando um page.ts ou um ponto S de página é criado nela Seguindo a próxima convenção de roteamento e 14, para implementar uma rota, você definitivamente precisa criar uma pasta dentro do diretório do aplicativo Vamos supor que estamos criando um site de recompensas, onde precisamos de uma página de contato e uma página de perfil. Comum B para abrir o Explorer. Ganhe o diretório do aplicativo, clique com o botão direito do mouse e depois em nova pasta. Vamos chamá-lo de contatos, assim como esses. Outra, dentro do aplicativo, clique com o botão direito, nova pasta. Isso será chamado de perfil. Feito isso, vamos dar uma olhada no navegador para ver se ele é roteável Volte para o navegador e aqui vou fazer Localhost Pot 3.000 Quando você clica no entaky, ele diz que retorna uma página de 44 raízes encontradas. Você sabe por quê? É simplesmente porque temos que criar uma página para fazer TSS ou fazer gs dentro da pasta de contatos É exatamente quando essa pasta se tornará uma rota. Clique em novo arquivo. E vamos fazer o TSS de pontos de página. Dentro do RFC para gerar o componente funcional de reação. Página de contato. Você pode usar uma tag H one se quiser. Dê uma olhada. Agora, ao verificar o navegador, você verá a página de contato. Vamos rotear a página do perfil. Eu vou fazer Lost than profile. Quando você clica no ak, ele retorna uma página 404 ernaut encontrada. Acho que agora, você deve saber exatamente o que fazer do seu lado. Publique o vídeo e implemente a rota do perfil. Deixe-me ajudá-lo com isso. W no diretório do perfil , clique com o botão direito do mouse em novo arquivo, e vamos chamá-lo de page dot TSX Simplesmente porque estamos usando script de tipo. É por isso que vamos usar a extensão dot TSS. Ele pressiona a tecla enter, novamente, RFC para gerar o componente funcional de reação Aqui, eu vou fazer a página de perfil. Vamos implementá-lo dentro da tag H one. Corte isso, coloque-o dentro e desosse. Tudo bem Salve no navegador, você pode ver? Agora, a página está visível. Você pode dar à tag Hadron um nome de classe e, em seguida, vamos fazer o texto nove do Excel Essa classe utilitária de vento traseiro significa simplesmente que estamos aumentando o tamanho da fonte até seu RM. Quando você vê e confere o boom do navegador. Você pode ver, fica muito ousado assim. Agora, é exatamente assim que se implementa o roteamento no próximo S. Também podemos rotear para a página de contato, exatamente assim e pronto. Você pode ver? Anote esses pontos-chave. As rotas são associadas aos arquivos com base no nome das pastas contidas no diretório do aplicativo. Um ponto TS de página dentro da pasta de contatos será mapeado para o contato de barra, e um ponto TSS de página dentro da pasta de perfil será mapeado para o perfil de barra É por isso que quando você vem aqui e corta o contato, você acessa a página de contato Na verdade, podemos dar a ele uma cor de fundo, para que você entenda do que estamos falando. Aqui, vamos dar o nome da classe SV. Então, dentro do nome da classe, vamos fazer uso da classe utilitária, PG yellow, 500. Quando você salva e verifica o navegador, aqui está a página de contato. Em resumo, cada pasta no diretório do aplicativo corresponde a um segmento de URL, quando uma página com uma extensão de ponto TS ou GS é criada no ensino de Good. Linda. 11. Rota dinâmica: Na palestra anterior, discutimos a rota aninhada Por isso, criamos ainda mais os usuários. Além disso, entre os usuários, seguimos o primeiro usuário e o segundo usuário E dentro temos uma página TSS, que corresponde à parte do URL, barra do usuário, barra do usuário, barra do usuário, barra do usuário, barra do segundo usuário Embora essa abordagem funcione perfeitamente , ao criar um aplicativo de recompensa, nem sempre é possível definir uma rota com base em uma parte predefinida Então, deixe-me detalhá-lo rapidamente usando um exemplo de recompensa. Este é o elegante e super rápido site do próximo portfólio de Jazz que vamos criar neste curso. E, a propósito, o link está logo na descrição. Então, eu recomendo fortemente que você se inscreva. Há muito valor em aprender com isso. Aqui eu listei algumas das postagens do blog. Agora, se eu clicar em qualquer item, poderemos passar o item para uma nova página. Deixe-me mostrar, por exemplo, quando eu clico nesse cara, dê uma olhada. Se você observar bem o URL, verá uma barra nos detalhes do portfólio como zero. Isso significa que esse item tem o ID zero. Vamos experimentar com outro item. Vamos voltar para casa. Deixe-me experimentar com esse cara. Agora, se você observar o caminho, verá a barra detalhe do portfólio, a barra cinco Isso simplesmente implica que este item tem o ID de cinco. O sistema de roteamento dinâmico possibilitou que pudéssemos passar esse item para uma nova página E com a ajuda do ID, podemos buscar os dados correspondentes. Você pode ver à esquerda, você pode ver os dados correspondentes a este item. Então, isso exemplifica o sistema de roteamento dinâmico. Ainda não falei sobre tudo isso. Vá rapidamente para o código VS e menos pratique-o. Voltar ao código VS. Então, vamos criar uma nova pasta cad blog. Então, dentro do blog, vamos criar um TSS de pontos de página Eu vou fazer o TSS da página inicial. Portanto, este é um atalho para criar uma pasta e uma página dentro dela Então, quando você pressiona a tecla enter, aqui está o blog. Você pode ver? Aqui está a página Ts, gere o componente funcional. O que devemos fazer agora é renderizar uma postagem no blog. Da maneira que podemos fazer isso aqui, vamos usar a tag H one, e eu vou bloquear a postagem um como essa, destacar e duplicá-la oito vezes Em seguida, mude-o para bloquear o poste dois, três, cinco, seis, sete, oito. Ao salvar o projeto, volte para o navegador e vamos ver o que temos. OK. Temos que navegar até o aplicativo de demonstração. E eu vou fazer um blog de slash. Dê uma olhada. Agora, conseguimos renderizar a postagem do bloco no navegador. Portanto, a próxima linha é clicar em qualquer um dos itens e depois passá-lo para uma nova página. E é exatamente aí que entra o roteamento dinâmico. Agora volte para o projeto. Então, dentro da pasta do bloco, clique com o botão direito do mouse, vamos criar uma nova pasta chamada ID do bloco. Para criar uma rota dinâmica, temos que colocar o nome da pasta dentro de um colchete. O colchete significa uma rota dinâmica. Agora vou fazer o ID do blog, simples assim, ou você pode fazer o ID da postagem. Vamos fazer o ID postal. Talvez seja mais legível assim ID da postagem. No ID da postagem, clique com o botão direito do mouse e, em seguida, criaremos uma nova página. Isso será chamado de página Terex, gere o componente funcional Aqui vamos ter uma tag Hage one, e eu vou fazer uma página de detalhes Quando clicamos em qualquer item do bloco, devemos ser capazes de passá-lo para a página de detalhes. Quando você salva e confere o navegador, agora vamos fazer o slash blog slash, por exemplo, vamos fazer um Quando você pressiona a tecla enter, agora você vê a página de detalhes. Quando você faz slash blog slash, 100, você também verá a página de detalhes Slash 800, ou qualquer ID que você tenha em seu projeto Então você vai ver a página de detalhes. Então, devemos falar um pouco sobre isso. Estamos progredindo e eu gosto disso. Então, simplificando, trate um colchete como um segmento dinâmico que nos permite criar uma multidão dinâmica Portanto, quando uma pasta é agrupada dentro do colchete, você não precisa referenciar a pasta dentro do URL antes de poder obter o conteúdo na página Portanto, a essência da rota dinâmica é poder extrair o ID de uma postagem e depois trabalhar na postagem individualmente. Então, por exemplo, vamos voltar para a primeira demonstração. Portanto, se você extrair o ID desse conteúdo, ao clicar, com base no ID, poderemos realizar alguma operação nele. Assim, poderemos buscar os dados correspondentes. Também podemos excluir e fazer o que quisermos com os dados. Então, agora, deixe-me mostrar como extrair o ID. No próximo gs. Cada página no roteador recebe parâmetros de rota como sondas Então, ganhe a página, certifique-se de abrir o ID da postagem desta forma e depois a página ts. Dentro da função. Então, vamos considerar os parâmetros como sondas. Feito isso, o próximo passo é vinculá-lo à interface do usuário Extremamente fácil de fazer isso. Ganhe uma etiqueta no hedge, abriremos e fecharemos os colchetes C e, dentro do colchete C, farei os parâmetros dot Simples assim. Faça anotações, o segmento dinâmico que criamos deve corresponder à interface do usuário. Então, tudo o que você tem dentro desse segmento dinâmico como ID da postagem, é exatamente isso que você terá aqui. Portanto, verifique se a grafia está correta, pois é exatamente isso que estamos nos referindo e estamos tentando vincular essas coisas aqui à interface do usuário para extrair o ID, simples assim Então o aplicativo está reclamando, temos que definir o tipo Os parâmetros são um objeto com uma chave chamada ID da postagem e o tipo é string É exatamente assim que você define seu tipo ao trabalhar com o script de tipos. Aqui, vamos fazer parâmetros. O objeto tem um ID de postagem com a string de tipo e agora satisfazemos o tipo. Vamos dar uma olhada no navegador. Agora eu vou fazer o slash blog slash 200. Dê uma olhada. Você pode ver? Agora temos a página 200 do DTS Então esse é o ID. Estamos obtendo isso do URL. Deixe-me te mostrar uma coisa. Aqui, vamos dar o nome da classe e, em seguida, vou fazer o texto nove do Excel. Linda. Vamos torná-lo mais legível Página DTS com o ID e o osso. Temos uma página de detalhes com o ID 200. Vamos verificar outro. Vamos fazer 17. Página de detalhes com o ID 17. Então, podemos fazer 800, e assim por diante. Agora, conseguimos obter o ID do URL. Podemos então começar a trabalhar na postagem. Isso é tudo por enquanto, e se você achar esta palestra útil, certifique-se de quebrar o quadro de luz e, caso contrário, clique em inscrever-se e, caso contrário, clique em inscrever-se 12. Rota dinâmica aninhada: Próxima multidão dinâmica. Ao criar um aplicativo complexo. Você definitivamente se deparará com um cenário em que vários segmentos dinâmicos de público são necessários. Deixe-me mostrar um exemplo do site Reward. OK. Este é o site da Reword, é claro Vimos que, quando você clica nesse item, conseguimos passá-lo para uma nova página, certo? Linda. Agora, o que queremos fazer é também buscar um comentário que foi escrito sobre a postagem. Entendido. Por exemplo, você clica em. Ele se abre em uma nova página, buscando os detalhes pelo ID E então, quando você rolar para baixo, poderemos ver o comentário escrito sobre esta postagem. Bom. Então, se quisermos especificar a rota, podemos fazer slash portfolio det zero, slash comment slash Entendido. Linda. Volte para o código, a menos que o implemente rapidamente. Como o nome indica, tudo o que precisamos fazer é criar uma nova pasta dentro do ID da postagem. Aqui está o bloco, você deve abri-lo dentro do ID da postagem, clicar com o botão direito do mouse e criar uma nova pasta. E chamaremos esses comentários. No comentário, clique com o botão direito crie uma nova pasta. E neste momento, queremos criar uma próxima rota dinâmica. Portanto, para criar uma rota dinâmica, tudo o que você precisa fazer é colocá-la entre colchetes. Em seguida, vamos fazer um ID de comentário assim. E dentro do ID do comentário, clique com o botão direito, temos que criar uma página dentro da página dot T sex. Aqui vamos fazer o RFC para gerar o componente funcional Agora, estamos tentando escrever o comentário sobre uma postagem específica. Criamos um comentário de código de pasta dentro do ID da postagem e, dentro do comentário, criamos nossa rota dinâmica, e aqui está a página dentro. Então, para um determinado ID de postagem, uma página do TSS dentro da pasta de comentários, que é esse cara, ajudará a exibir a avaliação da postagem por seu ID Vamos praticá-lo. Então, dentro, é claro, temos que considerar os parâmetros, e quais serão os parâmetros Obviamente, os parâmetros são um objeto com o ID da postagem e o ID do comando Feito isso, vamos vir aqui e fazer alguma coisa. OK. Vamos usar a tag H one. Vencer. Vou fazer o ID do comando Params dot Deixe-me te mostrar. Por favor, tem que ser esses. Opa, dê uma olhada Nós espalhamos algo errado por aqui. É preciso ser gramaticalmente exato. Então, vamos remover o n assim. Este é o ID de recomendação. Você pode deixar isso, mas é preciso ser gramaticalmente honesto Então, o que vou fazer agora é fechar o explorador e, em seguida, temos o ID do comando Params dot Esses parâmetros são o segmento URA aqui para o ID do comentário, que é o segmento dinâmico aqui, e deve ter exatamente a mesma grafia aqui quando você está tentando vinculá-lo exatamente a mesma grafia aqui quando você está tentando vinculá-lo Portanto, temos o ID do comando Param dot, que é o segmento dinâmico que criamos. Tentando explicar isso de forma simples para que todos entendam bem o suficiente. Então, aqui vamos fazer para bloquear postagens, Param dot post ID. Quando você vê e finaliza a compra no navegador. bloco, o ID é um, barra, barra de comentários E aqui estão os comentários, um para bloquear o primeiro post. Então, se você fizer aqui, por exemplo , 800, verá os comentários 800 para bloquear a postagem 800. Então, é exatamente assim que se implementa. Volte para o código. Temos que satisfazer esse tipo antes de encerrarmos a palestra. Obviamente, params é um objeto. O ID da postagem é do tipo string. O ID de elogios também é do tipo string. Então, o tipo é satisfeito, todos os erros desaparecem. OK. 13. ErrorPage (arquivos especiais): Quando você segmenta uma rota que não está definida na pasta do aplicativo. Em seguida, renderizaremos uma página de erro 44 não encontrada por falha D. Deixe-me te mostrar rapidamente. Por exemplo, todos vocês sabem que não temos nenhuma rota como o slash Portfolio, não temos essa rota em nosso projeto Quando você pressiona a tecla enter, dê uma olhada. Diz quatro em quatro, esta página não foi encontrada. Essa é exatamente uma das belezas do próximo gás. Isso ajuda você a definir uma página de erro quatro em quatro não encontrada. No entanto, ao criar um aplicativo de recompensa, você definitivamente gostaria de criar uma página de erro de quatro em quatro não encontrada mais bonita. Tudo bem. Vamos ver como podemos implementar isso. Volte para o seu projeto e , em seguida, w no diretório do aplicativo. Clique com o botão direito do mouse e, em seguida, vamos criar um novo arquivo. E isso será chamado de not found dot TSX. ROFC para gerar o componente funcional, e aqui, o que vou fazer agora é, digamos, dar uma olhada nisso, remover o traço entre o não encontrado para que a função não Então, dentro, teremos uma etiqueta He one e dentro da cobertura uma etiqueta, eu vou fazer a página não encontrada E então vamos ter outra etiqueta de hedge one. O recurso solicitado não foi encontrado. Então, agora você pode adicionar cor a ele e depois projetá-lo de acordo com seu gosto. Quando você volta ao navegador e vê a página não encontrada, o recurso de solicitação não foi encontrado. Então, é exatamente assim que implementaremos quatro ou quatro páginas de erro não encontradas nos próximos anos. Se você segmentar qualquer rota que não tenha em seu projeto, esta página definitivamente será exibida. Então, digamos, por exemplo, Localho do que carrinhos. Como não temos nenhuma rota em nosso projeto que corresponda aos cortes , ele nos redirecionará para a página não encontrada E é exatamente assim que se implementa a página de erro four oh four not found. Assim, você pode adicionar mais cores, à fonte e a tudo o que quiser fazer. Você pode ir em frente para fazer isso. 14. Coligação de arquivos: Colocalização do arquivo. A colocação de arquivos significa simplesmente a maneira como você organiza os arquivos do seu projeto no próximo momento. Vamos dar esse exemplo rapidamente. Dentro do aplicativo, vamos criar um painel de pastas. Dentro, vamos criar um conjunto de arquivos em pontos, TSX. Vamos gerar rapidamente o componente funcional. Vamos dar uma olhada no navegador. Painel de controle Slash. O recurso solicitado não foi encontrado. Você sabe por quê? É simplesmente porque esse arquivo não é roteável Lembre-se de que na aula anterior, mencionei que sempre que um diretório é criado dentro da pasta do aplicativo, esse diretório automaticamente se torna uma rota quando uma página faz TSS ou uma página é criada dentro dela Então essa é a convenção, e agora estamos fazendo configurações dot TSS Isso não vai funcionar. Para que possamos colocar esse arquivo corretamente. O que temos que fazer é dentro do painel, eu vou criar um novo arquivo. Então vamos ter um ponto de página TSX como esse, RFC para gerar o componente funcional, tudo O que precisamos fazer agora é voltar às configurações e, em seguida, copiá-las rapidamente. A função é como essa, destaque a cópia, volte para a página, vamos colar aqui, assim. Quando você salva, pois temos que salvar algo aqui assim. Quando você volta ao navegador, agora a página é roteável Mas talvez você não consiga ver as configurações aqui. Mas pelo menos agora a página é roteável. Outra forma de organizar seu arquivo e que eu recomendo é criar uma pasta de componentes separada para sua interface de usuário. Dentro do recurso, que é o SRC, clique com o botão direito nova pasta e, em seguida, chame-a de componentes Dentro desse componente, é onde toda a sua interface de usuário ficará. Dentro do componente, você pode ter algo assim, os componentes domésticos fazem GS. Então, agora você pode gerar o componente funcional. E aqui você pode começar a criar sua interface de usuário. Essa é uma das melhores maneiras de cocodificar seu arquivo. E todas essas paradas, vamos praticá-las no futuro quando começarmos a criar o site do portfólio de recompensas. Claro, ele está implantado ali na embarcação. Você pode conferir para ver como é lindo, e eu sugiro que todos se inscrevam porque temos muito a oferecer 15. Pasta privada: Bem-vindo de volta à aula. Nesta palestra, discutiremos as pastas privadas em detalhes A pasta privada é um futuro fornecido pelo next S para ajudá-lo a organizar seu projeto de forma eficaz. Essa pasta e todas as suas subpastas não são roteáveis. Mesmo se você segmentar o segmento da rota, eles não serão renderizados na tela Portanto, para criar uma pasta privada, você precisa prefixar o nome da pasta com um sublinhado Deixe-me mostrar para você abrir o Explorer. W no aplicativo, clique com o botão direito. Vamos imaginar que você queira realizar alguma operação privada dentro da pasta da biblioteca. Para que as anotações dessa pasta sejam roteáveis, tudo o que você precisa fazer é prefixá-las com um sublinhado e pressionar a tecla enter Agora temos o prefixo com um sublinhado. Clique com o botão direito e vamos criar um novo arquivo. Então, vou fazer a página TRX e pressionar a tecla enter Quando você faz RFC e boom, eu vou fazer aqui, esta é a página privada OK. Quando você diz até mesmo confira o navegador. Vamos ver o que temos. Corte, sublinhado, É a arquia, e vamos ver a página não encontrada. Você pode ver isso? Então, isso ocorre simplesmente porque sempre que você prefaciar um potencial com um sublinhado, em seguida, trate-o como uma rota privada Portanto, não será roteável. Mas vamos ver agora, quando removemos o sublinhado, vamos ver o que acontece Vamos tirar o sublinhado assim. Estrondo. Volte para o navegador e também tire o sublinhado, como este e a bomba Esta é a página privada. Então, agora removemos o sublinhado. Não é mais uma página privada. Mas se você quiser torná-la uma página privada, precisará voltar e prefixá-la com um sublinhado E onde está essa pasta. Tudo bem. Aqui está. Clique com o botão direito, renomeie Então, aqui vamos ter o sublinhado, exatamente assim Dê uma olhada. Diz que, não encontrado, os resultados solicitados não foram encontrados. Portanto, sempre que você prefixa uma pasta com um sublinhado, isso indica que a pasta tem alguns detalhes de implementação privados e que essa pasta não deve ser considerada pelo sistema de roteamento e, portanto, exclui a pasta e todas as suas subpastas do roteamento todas as suas subpastas Ensinando bem, Beautiful. 16. Grupo de rotas: Nesta palestra, vamos discutir o grupo Route. O grupo de rotas é um recurso muito bonito do next S que permite organizar seu segmento de rota e arquivo de projeto em um grupo lógico sem afetar a estrutura do caminho do URA. Se você quiser criar um grupo de rotas, tudo o que você precisa fazer é agrupar a pasta entre parênteses, e essa é exatamente a Ainda não defini tudo isso. Vamos praticá-lo rapidamente implementando um sistema de autenticação com a página de cadastro, página login e esquecimento da senha Clique com o botão direito no aplicativo, novo arquivo. Vamos criar o pedido de registro cortar uma página Ts. P é o arquivo. Linda. RFC para gerar o componente funcional e, dentro, vamos ver o que podemos fazer aqui Vamos colocar uma tag no cabeçalho, e eu vou fazer a página de registro. Vamos dar a ela um nome de classe. Em seguida, texto, vamos transformá-lo em cinco Excel. Encontrei um servo. Vamos fazer isso em Excel. Novamente, clique com o botão direito no aplicativo, novo arquivo. O próximo é o login para criar a página Ts. Você precisa usar a barra frontal e depois a página TSX. Novamente, gere o componente funcional rapidamente. Vamos voltar para a página de registro, destacar a etiqueta Hage one, policial, venha aqui Colar. Aqui vamos fazer a página de login. Pode torná-lo mais bonito especificando a cor de fundo e tudo Por fim, vamos criar a senha esquecida. Novamente, colaremos a tag de primeira idade e, em seguida, aqui estará a senha esquecida. Ok. Legal. Portanto, seguro, certifique-se de executar o aplicativo. Como você pode ver, o meu já está funcionando, então eu só tenho que esconder o terminal. No navegador, vamos fazer localhost três Aqui está a página de registro. Linda. Quando eu faço o login com barra, aqui está a página de login Por fim, ele esqueceu a senha. E aqui está a página de esquecimento da senha. Embora tudo pareça estar funcionando perfeitamente bem , essa abordagem não está organizada. Não é uma boa prática. Porque se outro desenvolvedor escolher seu projeto, estrutura do projeto será difícil de ler Portanto, temos que organizar nosso arquivo relacionado à autenticação em uma única camada principal. Por exemplo, deixe-me mostrar, digamos que você entregou esse projeto para outro desenvolvedor. Então, se o desenvolvedor quiser implementar algo dentro do login, a estrutura não está organizada. Se você estiver criando um aplicativo complexo, é provável que tenha mais do que, digamos, 20 arquivos. Dentro do aplicativo, crie uma nova pasta chamada th. O próximo na fila é mover a página de registro para a décima. Novamente, precisamos mover a página de login ou a rota de registro para o dd. Por fim, também temos que mover a senha falsificada para a Terra desta forma Essa é uma das melhores maneiras de organizar seu código. Por exemplo, se outro desenvolvedor pegar seu código e você quiser fazer algumas alterações na página de login ou de registro, ele sempre poderá acessar o diretório terra, pois esse é exatamente o local onde armazenamos todos os arquivos relacionados à autenticação Ao clicar para abrir, você verá a senha forjada, o login e o registro Então, isso é mais moedas. Agora, deixe-me mostrar o problema. Ao voltar ao navegador, você verá a página não encontrada. Isso aconteceu porque movemos o arquivo para fora da pasta principal. Anteriormente, estava dentro do diretório do aplicativo, e agora criamos uma pasta principal cortada e movemos o arquivo para dentro dela. Para você seguir a rota dos registros, você deve fazer referência ao O. Deixe-me mostrar Vamos fazer o registro slash of slash. Você vê? Novamente, slash slash Faça login Tudo parece estar funcionando perfeitamente bem, mas a estrutura do caminho do URA está sendo afetada. Lembre-se de que, quando criamos a página de registro, host local 3.000 cortou o registro. Agora diz que a página não foi encontrada. A ideia é agrupar a rota com cuidado sem precisar afetar a estrutura do caminho do URA. Como implementamos isso? Volte para o código e deixe-me te mostrar. Portanto, para implementar adequadamente um grupo de rotas, tudo o que você precisa fazer é agrupar o diretório pai com parentenss Clique com o botão direito em Renomear. Então, aqui, vou abrir o suporte aqui e depois fechá-lo aqui. Diga ontem. Portanto, ao voltar ao navegador, você poderá rotear a página de senha sem precisar referenciá-la. Além disso, o login e o cadastro. Então, isso aqui não é mais visível na estrutura do URA. Deixe-me te mostrar. Você pode ver? Linda. Vamos lá, slash, faça o login Você pode ver? Tudo está funcionando perfeitamente, conforme o esperado. Ensinar bem. Linda. 17. Layout: Bem-vindo de volta à aula. Nesta palestra, vamos aprender e entender o conceito de layout Agora, o que exatamente é um layout? O layout é simplesmente uma interface compartilhada entre várias páginas no aplicativo. Ao criar um site complexo, é provável que você queira ter um cabeçalho que permaneça consistente em todas as páginas e que possa ser obtido usando o layout. Agora, a questão é: como realmente definimos um layout? Um layout pode ser implementado por padrão exportando um componente de reação de um ponto de layout TSS ou de um ponto de layout E o componente de layout aceitará adereços infantis que serão preenchidos com uma página de gráfico durante a renderização Anote esse ponto chave. O layout serve como componente raiz de cada próxima aplicação GS. Ele deve ter uma tag HTM e um corpo. Abra o aplicativo e, em seguida, dentro do aplicativo. Aqui está o layout raiz. Acredito que mostrei isso a você na palestra anterior. Você pode ver? Portanto, ele tem uma tag HTM, um idioma que é dito em inglês, e depois tem um corpo Digamos, por exemplo, que queremos implementar um componente de cabeçalho que permaneça consistente durante todo o projeto Então, digamos que queremos um componente de cabeçalho e pé que permaneçam consistentes ou durante todo o projeto. Agora, dentro do componente, aqui dentro do componente, clique com o botão direito do mouse em novo arquivo. E eu vou fazer aa dot es. Gente, eu vou ser um pouco mais rápido agora. Então aqui eu vou fazer Foot a dot es. Dentro do Futa, vamos fazer o FC para gerar o componente funcional E aqui vamos dar a ela um nome de classe e, em seguida, vamos dar a ela um traço BG Este é o Futa, vamos dar uma grande pitada. Traço amarelo 300. Então esse é o Futa. O que vou fazer agora é copiar parte do teste do dia, porque eu já amo o design. Eu só tenho que copiar o Hage no registro ou na página de login Venha aqui no rodapé e cole. Aqui vou implementar o preenchimento, P por ter feito tudo isso Eu rapidamente tenho que copiar este aqui e depois ir para o cabeçalho S, RFC para gerar o componente funcional Então, na devolução, basta colar. Salve e faça para formatar o código. Tudo bem. Agora vamos mudar o amarelo para azul 300, algo assim. Então aqui vamos fazer operações, veja. Essa deve ser a página principal. E você salva, volta para o rodapé, e essa deve ser a página do rodapé Já estamos criando um aplicativo de recompensa, e isso é bom. Portanto, esta é a página inicial de todo o aplicativo. Queremos que o cabeçalho e o rodapé permaneçam consistentes em todas as páginas Então, se você for para a página de bloqueio, o cabeçalho e o rodapé serão exibidos, os usuários, a autenticação e todas as páginas Então, a maneira de fazer isso agora é rolar um pouco para cima, fazer o layout do TSS, rolar até o topo e aqui vamos colocar cabeçalho do componente ponto, barra Por fim, vamos colocar componentes da barra, rodapé da barra Aqui, temos que renderizar o cabeçalho e fechá-lo com a tag de fechamento automático. E aqui vamos renderizar o rodapé. Quando você salva e verifica o navegador e faz isso. Agora, quando você faz slash blog. Você pode ver que o cabeçalho aparece tanto na página do blog. E então podemos fazer o perfil de barra. Temos todas essas rotas dentro do projeto. Obviamente, nós o implementamos nas palestras anteriores. E bum. O cabeçalho e o rodapé são consistentes em todo o projeto Então, você os obterá em qualquer lugar da sua página. Então esse é exatamente o conceito de layout. 18. Grupo de grupo de rota de layout: Bem-vindo de volta à aula. Na palestra anterior. Aprendemos como criar, em geral, um layout que possa permanecer consistente em todas as páginas. Mas às vezes você pode querer criar um layout exclusivo que se aplique a uma página específica em seu aplicativo. Vamos supor que você queira que outras páginas do usuário tenham um plano de fundo semelhante. Você pode criar um layout dentro e, ao executar o aplicativo, a página entrará no layout e assumirá a forma e o plano de fundo. Vamos praticá-lo rapidamente. Dentro dos usuários, vamos criar um layout. Layout dot TSX, exatamente assim. Em seguida, vamos gerar rapidamente o layout. Só preciso copiar e colar, e você pode pausar o vídeo no final para digitar todas as coisas ali mesmo O que eu fiz aqui, vamos começar do zero. Eu só tenho que acabar com esse cara. Ok, então você vai dar a essa classe dv um nome assim Ganhe o nome da classe, o plano de fundo será o sd, 200. E então a tela terá 100 de altura de visualização. Depois de criar esse plano de fundo, a rota do primeiro usuário e a rota do segundo usuário entrarão nesse layout como crianças, e aqui está. Então ele pode assumir essa propriedade aqui. Entendido. Linda. Ao salvar o aplicativo, confira o navegador. Quando você faz o Lhost, 3.000 usuários cortam o primeiro usuário. E então você verá o primeiro usuário com a cor de fundo vermelha. Agora vamos fazer alguma coisa. Não gosto do fundo vermelho e, a propósito, essa é minha opinião. Eu só vou fazer azul aqui. Azul 200. Eu acho que é legal assim. Podemos chegar a 100. Tudo bem. Esse é o filtro e esse é o cabeçalho. Lembre-se de que renderizamos o componente de cabeçalho e rodapé no layout raiz Essa é a razão pela qual você pode ver o cabeçalho e a folha ao redor das páginas no aplicativo Mas para o layout, criamos dentro dos usuários. O primeiro usuário e o segundo usuário são as únicas páginas que podem entrar nesse layout. Mesmo que você corte usuários, corte, segundo usuário, vamos fazer algo assim Você pode ver que agora temos um segundo usuário e ele assumiu a mesma cor de fundo. Agora você muda para amarelo e fica bem. Portanto, sempre que você estiver criando um aplicativo e quiser que duas ou três páginas diferentes assumam a mesma propriedade, tudo o que você precisa fazer é criar ainda mais um layout dentro da página principal. E então, todas as rotas dentro da matriz definitivamente entrariam no layout. É tão simples quanto isso. Agora, a questão é: se tivermos outro usuário, mas não quisermos que esse usuário assuma o mesmo plano de fundo. Então, é exatamente aqui que entra o desafio. Deixe-me te mostrar. Digamos, por exemplo, que temos até terceiros usuários. No seu arquivo, vou fazer um terceiro TSX por página. Gere os componentes funcionais. Então, aqui, basta ir até o primeiro usuário e copiar as propriedades. Vamos copiar as propriedades aqui. Claro, você pode conferir como eu implementei essas propriedades nos bastidores. Aqui temos a patente quatro. Pat and top é 20 O tamanho do texto e a altura da linha são oito Excel, a fonte é extra leve. Então você pode fazer isso do seu lado. Tudo bem, eu falo demais, realmente. É para seu próprio bem, porque eu quero explicar tudo Aqui, vamos fazer um usuário do Fed, assim, ok? Quando você economiza. Então, quando você corta usuários, corte o usuário Fed. E aqui está o terceiro usuário, assumindo o mesmo plano de fundo de propriedade dentro desse layout Então, o terceiro usuário, segundo usuário e o primeiro usuário. Toda esta página aqui entrará no layout, e eles residirão aqui como crianças. Então, quando isso acontecer, essa propriedade será aplicada aos filhos, que neste caso, são o primeiro usuário, segundo e o terceiro usuário. Mas, no momento, o desafio é excluir o terceiro usuário. Portanto, não queremos que o terceiro usuário entre nesse layout. Queremos estilizá-lo de forma diferente. O que precisamos fazer agora é criar um layout de grupo de rotas. É muito simples fazer isso. Agora, dentro desse usuário, esses são os usuários pais. Vamos criar uma nova pasta, o layout dos usuários. Agora, o que vamos fazer é mover esse layout dentro do layout do usuário dessa forma. Feito isso, também precisamos mover o primeiro usuário dentro do layout do usuário. Por fim, temos que mover o segundo usuário para o layout do usuário Feito isso, o que você precisa fazer é abstrair essa pasta da URL para que não precisemos cortar usuários, cortar o layout dos usuários, barra, primeiro Agora, ao voltar ao navegador, você perceberá que o terceiro usuário não assume mais a propriedade do layout. Mas temos um problema aqui. Ganhando a URL, temos que segmentar o layout do usuário. Slash, primeiro usuário. I Se você observar com atenção, perceberá que estamos fazendo muitas coisas apenas para atingir o primeiro usuário. A melhor prática é abstrair o layout do usuário do segmento de URL. A única maneira de fazer isso é colocar o layout do usuário entre parênteses, assim. Você pressiona a tecla enter. Com essa implementação, conseguimos abstrair o layout do usuário do segmento de URL Esse cara aqui não será injetado na URL. Agora, quando você acessa o navegador, ele diz: página não encontrada. Você sabe por quê? É simplesmente porque o layout do usuário está sendo abstraído do segmento de URL Ao fazer isso, ele não será injetado na URL. Tudo o que temos que fazer é limpá-lo assim. Agora será o Localhost, 3.000 usuários cortam usuários, cortam usuários Fas e boom. Você pode ver? Tudo está funcionando perfeitamente, conforme o esperado. Quando você corta Localhost, os usuários cortam o terceiro usuário. O terceiro usuário não pode mais usar as propriedades do layout. Então, é exatamente assim que você pode criar seu próprio layout e , em seguida, abstrair algumas das páginas que você não deseja que assumam as mesmas propriedades. Neste exemplo, queremos que o primeiro e o segundo layout assumam o mesmo plano de fundo e, em seguida, queremos criar um layout exclusivo para o terceiro usuário. Eu quero te mostrar tudo. Terceiro usuário, p Ts, vamos dar a ele um nome de classe de fundo e, em seguida, Bg red 200. Também podemos atribuir uma altura, tela H. Então, isso fará com que a altura da vista seja 100. Você pode ver? Agora, implementamos um plano de fundo exclusivo para o terceiro usuário. Mas quando você verifica o primeiro usuário, ele tem um fundo amarelo claro e, em seguida, o segundo usuário também tem o fundo amarelo claro. 19. rota de metadados: Nós voltamos para a aula. Nesta palestra, discutiremos o roteamento de metadados Quando se trata de criar aplicativos profissionais. Garantir a otimização adequada de SEO é crucial para melhorar a visibilidade que leva a conversões. A API de metadados introduzida pelo next GS permite que você defina metadados para cada página. Garantir que informações precisas e relevantes sejam salvas quando sua página for compartilhada ou indexada. Nesta palestra, discutiremos como utilizar a API de metadados para melhorar o roteamento de metadados Seguindo a nova convenção de roteamento. Há duas maneiras de configurar metadados. Você pode gerar o objeto de metadados estáticos ou exportar uma função dinâmica de geração de metadados Isso pode parecer um pouco complicado. Mas se preocupe, quando começarmos a praticá-lo, você definitivamente o entenderá bem o suficiente Agora, abra o código VS e deixe-me mostrar para você. Aqui, temos que fechar algumas coisas. Estamos no aplicativo. O layout aqui contém os primeiros metadados. Os primeiros metadados que temos em nosso projeto podem ser vistos no layout raiz. Clique para abrir. O layout raiz está diretamente no diretório do aplicativo. Esse é o layout padrão de cada próximo aplicativo S. Aqui estão os metadados. Dentro, temos o título e a descrição. Quando você voltar para o navegador, opa, veja. Esta é a página inicial. Vamos implementar rapidamente a altura. Dê o nome da classe rapidamente. Dê a altura de 100 pés de altura. Tudo bem, olha, está funcionando bem. Então, vamos dar rapidamente ao H um nome de classe. Então eu vou fazer texto para o Excel. Tudo bem, ótimo. Página inicial. Está tudo bem. Você pode implementar o preenchimento e o resto deles, mas essa não é a intenção desta palestra Agora, vamos fechar a página voltar aos layouts do TS. Então, eu não vi o título e a descrição. Quando você voltar ao navegador, vamos inspecionar rapidamente o console Abra a janela do elemento. O Aqui, dentro da cabeça, clique para abrir. Então, ao rolar para baixo, você verá o título criticar o próximo aplicativo É daqui que vem, aqui mesmo. Você pode fazer, digamos, o próximo caso, do iniciante ao avançado. Agora, você pode ver? No título, você verá o próximo curso do começo ao avanço. Eu não vi os primeiros metadados. Também podemos criar nossos próprios metadados na página. Então, deixe-me mostrar como fazer isso. Temos que procurar uma página que possamos usar. Então, vamos tentar usar o perfil aqui. Em seguida, abra a página TS. Então, aqui no topo, temos que definir os metadados. No interior, ele ocupará uma propriedade chamada título. Dentro do título, vou programar com um barbeiro. Salve o aplicativo e confira o navegador. Agora eu quero te mostrar uma coisa. Aqui está a página inicial. Quando você recarrega, e aqui temos o título como próximo curso, do início ao avanço Agora, quando você faz um perfil. Confira o título novamente. Agora é chamado com do baba. É exatamente assim que você pode criar seus metadados estáticos. Feito isso, vamos ver rapidamente como podemos criar metadados dinâmicos. Vamos supor que você esteja criando um aplicativo de bloqueio. E cada bloco tem vários posts. Quando você clica em cada uma das postagens, devemos ser capazes de ver o título da postagem como metadados. Vamos fazer isso rapidamente. Abra o bloco e dentro do blog aqui mesmo, dentro da página que o TSS não está aqui Este é para a página de bloco único. Abra o ID da postagem e você verá os pontos da página Tudo bem. Aqui é exatamente onde o telefone começa. Primeiro, precisamos importar os metadados do próximo. Importe, entre colchetes, os metadados a partir do próximo. Feito isso, vamos criar rapidamente o tipo. Agora, params será um objeto com um ID de postagem de string. Linda. Feito isso, vamos exportar rapidamente os metadados. Vamos examinar rapidamente as palmas das mãos. Não precisávamos configurá-lo para uma função de seta. Agora vamos voltar. Então, com a devolução, acessaremos o título da propriedade. A postagem do blog. Então eu vou fazer Params dot post ID Estamos tentando vincular os metadados e o ID da postagem. Então, ao clicar em qualquer postagem, você verá o título dessa postagem dentro do título dos metadados. Tendo feito isso. Por fim, temos que alterar essa função aqui porque já criamos o tipo aqui OK. Só temos que deletar este assim. Limpe-o, e então eu vou fazer as sondagens. E tendo feito isso, ok, há um problema aqui. Ok, pessoal, dêem uma olhada. Então, quando você vier aqui, vamos dar a ele o ID da postagem , porque isso deve ser o mesmo com o céu aqui, que é o segmento de URL. Está bem? E aqui deve estar o ID postal, assim como este. Vamos dar uma olhada no navegador, atualizar. Agora eu vou fazer Localhost 3.000 slash blog slash 800. Vamos ver o que acontece. OK. Linda. Vamos colocá-lo na janela do elemento. Clique em “Head in”. E com o título, você verá o bloco post 800. Você pode ver o poste 800 do bloco? Portanto, conseguimos extrair o ID e depois passá-lo para o título usando metadados Então, se você fizer isso, por exemplo, corte o bloco, corte Então, ao conferir o título, você verá o bloco após o futebol. 20. TitleField: Metadados do título. O objetivo principal do campo de título é definir o título do documento, e ele pode ser uma sequência de caracteres ou um objeto. Um exemplo do campo de título da string é o que temos aqui no layout. Esse é o campo do título da string. Nesta palestra, prosseguiremos a implementação do campo de título do objeto Para conseguir isso, o que temos que fazer é limpar esse cara por enquanto e, em seguida, abrir e fechar o suporte central Certifique-se de colocar uma vírgula aqui. Novamente, certifique-se de importar os metadados em uma banheira. Importe metadados de tipo a partir do próximo. Feito isso, dentro do título, temos três propriedades diferentes. A primeira propriedade é o absoluto. A segunda propriedade é a propriedade Default. Por fim, a propriedade do modelo. Agora, vamos falar sobre a propriedade Default. A propriedade Default é útil quando você deseja fornecer um título para um segmento de rota que não tem metadados. Por exemplo, vamos ver uma rota de página dentro do projeto que não tenha metadados. Eu digo que tenho que encerrar isso para uma compreensão adequada. O usuário não tem metadados. Vamos ver o que temos aqui. Esta página não tem metadados. Quando você volta ao layout, tudo o que você precisa fazer é que esse é o título padrão para todos os layouts sem metadados Por exemplo, você pode usar uma frase mais legível no final que descreva a intenção do seu projeto Quando você vê até mesmo conferir o navegador, agora vamos fazer localhost slash, 3.000 usuários slash d user A atenção deve estar dentro da janela de elementos. Vamos abrir a cabeça, rolar para baixo e, em seguida, você verá que esse é o quarto título de todo o layout sem metadados. Mesmo que você finalize a compra, por exemplo, corte os usuários e corte o primeiro Este é o primeiro usuário e tem exatamente o mesmo título. Você pode ver a esperança de poder ver o título aqui. Esse é o título padrão para todo o layout sem metadados. Isso exemplifica a propriedade padrão. A próxima linha é o modelo. A propriedade do modelo é útil quando você deseja criar um título dinâmico adicionando um prefixo ou uma correção S. Vamos praticá-lo rapidamente para que você entenda a essência. Aqui está o modelo certo. O que eu vou fazer agora é o sinal de porcentagem, e então S assim, algo assim, e então eu vou fazer um Duba digital Ao salvar, vamos abrir rapidamente a página de bloqueio. Vamos usar a página de bloqueio para este. Aqui está o blog. Aqui está a página do bloco. Bom. Dentro da página de bloqueio, temos que importar os metadados da próxima vez e depois fazer isso. Vamos exportar rapidamente. E o tipo é metadados. Especifique o título, e eu vou fazer aqui a lista do blog. A ideia é simples. Queremos usar essa lista de blogs aqui para substituir, deixe-me mostrar esse cara. No navegador, você verá a lista de blogs, b data. Você salva. Vamos dar uma olhada no navegador. Localhost corta 3.000 barras. Oh, meu Deus. Gente, eu moro perto do aeroporto. Portanto, se você ouvir algum som do avião, isso simplesmente significa que você viajará em breve Tudo bem. Vamos continuar. Agora vamos ter o blog Localhost 3.000 Aqui dentro do título, você vê a lista do blog e depois o Duba digital Usamos a lista do blog para substituir o céu aqui. Em outras palavras, estamos sufixando a lista do blog com digitais do Duba, exatamente como visto no navegador na janela do Lista de blogs, dublagem digital. Sempre que você quiser prefixar ou sufixar algumas coisas em seu projeto, é exatamente assim que você pode implementá-las usando metadados Vamos falar sobre o absoluto. Tudo bem. A propriedade absoluta é útil se você quiser fornecer um título que ignore o modelo de título definido no layout principal Por exemplo, se você quiser ignorar os caras aqui, todo o modelo de título está aqui. Se você quiser ignorá-lo, você tem que fazer uso do absoluto. Vamos dar uma olhada no navegador novamente. Aqui, temos uma lista de blogs e um Duba digital. Se você voltar para a mesma página, que é a página do blog, agora vamos implementar o absoluto. O que temos que fazer é acabar com esse cara e depois introduzir o objeto. Dentro do objeto, vamos fazer valores absolutos. Eu só tenho que fechar isso. Estamos implementando o absoluto aqui, então não precisamos mais dele no layout principal. Limpe isso assim. Sa Aqui, o que você precisa fazer é que esse é o título absoluto. Quando você verifica o navegador, você pode ver que este é o título absoluto aqui. Tudo isso tem a ver com roteamento e metadados. 21. Links e navegações: Bem-vindo de volta à aula. Na palestra anterior, exploramos as próximas técnicas de roteamento de sistema baseadas em arquivos GS e aprendemos como criar diferentes técnicas de rota, e aprendemos como criar como a próxima rota dinâmica da rota Ed e a rota Ca. No entanto, você notará que estamos inserindo o URL manualmente na guia. Se quisermos direcionar para a página do blog, temos que fazer um blog de 3.000 slash do Localhost E então, se quisermos direcionar para a página de perfil, temos que cortar o perfil Do ponto de vista do desenvolvedor, não há nada de errado com isso. Mas, do ponto de vista do usuário final, isso é considerado impróprio porque os usuários finais podem nem saber a rota que você tem em seu projeto Portanto, devemos ser capazes facilitar o roteamento do usuário final de uma página para outra clicando em um link, e isso, é claro, será implementado com o componente de link presente nas próximas 14. Deixe-me te mostrar rapidamente. Volte para o código VS, comum B para abrir o Explorer. Ganhe o aplicativo. Então, aqui está a página inicial. A página faz S S que está diretamente dentro do diretório raiz, que é o aplicativo. Quando você clica para abrir, aqui mesmo, temos que implementar o link. Para implementar o link, primeiro dê uma olhada. A próxima imagem não está em uso. Então, temos que importar o link do próximo link de barra. Feito isso, vamos implementar rapidamente os links abaixo da tag H one. Então, vamos supor que queremos rotear para a página de bloqueio. Link e, por favor, anote. O link está em letra maiúscula L. A referência do hipertexto equ, não vamos usar o Em vez disso, vamos usar o código único ou o código duplo. Agora, vamos dar uma olhada em algo. Dentro do explorador, você perceberá que temos uma rota chamada blog, certo? Então, para direcionar essa rota, tudo o que precisamos fazer é cortar e, em seguida, especificar a rota, que é blog Simples isso. Em seguida, feche o link. Aqui, eu vou fazer a página de bloqueio. O HTML interno será o teste que será exibido na tela. E quando você clicar no teste, ele o levará à página do blog. Sete, confira o navegador. Está bem? Temos que navegar até a página inicial. E aqui está o blog. Quando você clica, agora estamos na página do blog. Ensinar bem. Linda. Portanto, você sabe que, ao implementar um aplicativo de recompensa , ao visitar a página de bloqueio não precisa clicar na guia aqui para voltar Em vez disso, devemos ser capazes de implementar um link aqui que nos redirecionará de volta à página inicial Então, o que vou fazer agora é voltar ao projeto, dentro da página de bloqueio. Esta é a página de bloqueio aqui. Vamos criar um link rápido a partir do próximo link de barra, e temos que colocar o link no topo desta forma HREF igual. Nós vamos fazer em casa, e aqui, vamos fazer em casa. Agora, não precisamos especificar uma casa aqui. Limpe-o. Portanto, se você quiser rotear para a página inicial, a convenção é especificar uma barra como essa Isso será um ponteiro para a página inicial. Quando você clica nesta página inicial dentro do HTML interno. Você será redirecionado para a página inicial. Sete, confira. E aqui está no topo. Você pode ver que, ao clicar na Página Inicial, você volta para casa e, em seguida , clica no blog, bloqueia. E agora estamos dentro da página do blog. Também podemos voltar para a página inicial. Tudo está funcionando perfeitamente, conforme o esperado. Agora, o próximo na fila é implementar o sistema dinâmico de aglomeração Por exemplo, se você usa Localhost blog slash 800 Agora, conseguimos passar a postagem do bloco para a página de detalhes. Então é exatamente isso que queremos fazer, certo? Então, por exemplo, quando você voltar para a página de bloqueio, se você clicar na página Bloquear postagem, poderemos passar a postagem bloqueada para uma nova página. Não precisamos digitar o URL manualmente na barra de endereço. Tudo bem, eu falei demais, na verdade. Mas é para seu próprio bem. Então, dentro da página de bloqueio, o que temos que fazer agora é implementar a multidão dinâmica. Já importamos o link na parte superior. Então, aqui, o que devemos fazer é simples. Destaque esse cara e, em seguida, corte-o, que é o texto HTML interno. E então teremos um link como esse. Em seguida, esse link, o H REF, que é a referência do hipertexto Corte, bloco, corte um. E então aqui, vamos colar o primeiro post do bloco. Tão simples quanto isso. Agora, quando você clica em Bloquear postagem, ela abrirá uma nova página com a postagem bloqueada um. Então, é exatamente assim que se implementa um link dinâmico. Agora temos que copiar o link, destacar das linhas 18 a 20, destacar a cópia. Venha aqui Destaque o texto HTMA interno, limpe-o e, em seguida, descarte esse cara Mas agora temos que mudar o ID para dois e o poste do bloco para dois também. E assim por diante e assim por diante. Então você pode fazer o resto do seu lado porque você é um cara inteligente. Claro, você pode fazer isso. Três, aqui vão ser três. Tudo bem, para não perder seu tempo. Só preciso salvar, voltar ao navegador e ver o que temos a bordo. Vamos tentar clicando em Bloquear publicação 1. Dê uma olhada. Diz página de dados com o ID de um Dê uma olhada no URL, bloqueie a barra 1 e agora conseguimos passar o ID de um cabelo Isso é tão bom. Então, quando você clica em Bloquear publicação dois, página de dados com o ID de dois, e assim por diante. Algo muito importante que quero compartilhar com vocês é a substituição das sondas Então, aqui, vamos formatar rapidamente o código. Tudo bem, ele tem uma forma muito bonita agora. Então, aqui eu posso fazer algo como substituir. Está bem? Ao salvar, vamos verificar o comportamento das sondas de substituição. Esse cara. Volte para o navegador. Agora, experimente. Clicamos em Bloquear postagem um. Ele abre a página B Dt com o ID de um. Então você volta. Bloqueie o post dois. Aqui, temos o ID de um posto dois. Tudo bem Agora, vamos clicar em Bloquear postagem três. Eu quero que você perceba o comportamento. Quando eu clico nesse cara aqui, você pode ver? Ele nos envia de volta à página inicial. Ok. Então, página do blog. A primeira postagem do blog, quando você clica, leva você de volta à lista do blog. E então, se você clicar no segundo e voltar, ele o levará de volta à página da lista do blog. Mas quando você clica na postagem três, ao voltar, ela o enviará de volta à página inicial. Então é exatamente isso que o suporte de substituição faz. Experimente. Eu clico. Veja, ele nos envia de volta para a página inicial. Por enquanto, isso está desativado e, na próxima palestra, discutiremos como estilizar condicionalmente 22. Links condicionais: Bem-vindo de volta à aula. Na palestra anterior, aprendemos como implementar os links de navegação Vamos estilizar o link com base nas condições. Por exemplo, se você observar esse lindo site de portfólio, perceberá que estamos na página inicial e é exatamente por isso que o link inicial é destacado porque o URL está ativo. Além disso, quando você clica no portfólio, o link do portfólio é destacado, simplesmente porque o portfólio de URL está ativo. Se você clicar em sobre mim, a mesma coisa aqui, simplesmente porque o URL está ativo, o link será marcado como selecionado. É exatamente isso que queremos implementar em nosso aplicativo de demonstração. W no projeto C e B para abrir o explorador. Vamos implementá-lo na página de registro. Aqui, o que precisamos fazer é clicar no layout. Claro, você sabe que a senha esquecida, o login e o registro definitivamente entrariam no layout Agora clique no layout para abrir e depois fechar o Explorer. A primeira coisa que vou fazer aqui é destacar e depois colocar um comentário nos metadados. Depois de fazer isso na parte superior, vamos importar o link da próxima barra. Agora, vamos importar o nome do caminho de uso. O nome do caminho dos EUA ajudará a paralisar bem o UR ativo Quando ele bloqueia bem o UR ativo, poderíamos extrair o URL e estilizá-lo O nome do caminho U, é claro, é um gancho e vem da próxima nação do slash Depois de fazer tudo isso, vamos fazer alguma coisa rapidamente. Novamente, uma coisa muito importante que você deve tirar daqui é que queremos ler todos os nossos links em uma matriz. Depois disso, só precisamos mapeá-lo. É exatamente assim que se cria um aplicativo como um profissional. Vamos começar com uma constante. Tenha links equ, abra e feche a matriz e, em seguida, dentro da matriz, teremos o primeiro objeto Vamos chamá-lo de nome. O nome vai ter um registro. Essa vai ser a vibração interna do HTM. Será o texto que definirá o link. Agora vamos ter um árbitro principal. Além disso, temos que definir o cabeçalho ref para o registro de barra. Sabendo que temos uma rota chamada register aqui dentro do projeto. Estamos visando essa rota. Agora, a próxima linha deve ser destacada, duplicada duas vezes. Aqui, vamos fazer o login. E vai ser uma barra. Faça login. Claro, aqui, vamos esquecer a senha. Tudo bem. Feito isso, certifique-se de alterá-la para letra minúscula, pois ela deve corresponder exatamente ao que temos aqui. A melhor maneira de fazer isso é clicar com o botão direito do mouse e renomear. Copie o nome e aqui você pode simplesmente entrar e colar exatamente o nome da rota. Opa, dê uma olhada Temos que colocar uma câmera nela. Tendo feito isso. Vamos mapear todas as coisas aqui e exibi-las na tela. Logo abaixo do tu ren, teremos colchetes Ci de abertura e fechamento para que possamos inserir scripts Java e fogões como Agora vamos fazer links de navegação, mapa de pontos. Em seguida, vamos acessar o link. Esse cara aqui representa cada link no RA. Ajuste-o para uma função R, abra e feche o suporte co E lá dentro, retornaremos a interface do usuário. Parentenças abertas e fechadas, dentro das parênteses, teremos o link O H REF, que é a referência do hipótex, vamos fazer link.hf Novamente, precisamos especificar a chave porque estamos mapeando por meio de um item. A chave será o nome Link Dot. Podemos usar o nome para identificar de forma exclusiva cada uma das coisas aqui Temos cadastro, login e esquecemos a senha. Eu me sinto bem. Rapidamente, vamos fechar o link, aqui mesmo, dar um nome de classe. Temos que renderizar o nome. Então eu vou fazer o nome de Link Dodd. Salve e confira o navegador. O isso. Observe-o cuidadosamente na parte superior. Você pode ver? Temos o cadastro, o login e a senha esquecida Agora, quando você clicar em Login, iremos para a página de login. Quando você clica na senha, vamos para a página de senha e também podemos voltar para a página de registro. Linda. Agora, eu quero que você se lembre da intenção. A ideia é marcar o link como selecionado ao clicar nele. Quando você clica em qualquer link, queremos que ele permaneça ativo. Por exemplo, quando você clica em Esqueci a senha, queremos que a senha esquecida seja destacada porque está ativa aqui na URL Vamos fazer isso rapidamente com a ajuda do nome do caminho dos EUA. O nome do caminho de uso é um gancho. Temos que invocá-lo. Vamos fazer isso aqui mesmo. Como tentamos aqui. O nome do caminho de uso é um gancho que precisamos invocar. Use o nome do caminho e, claro, é uma função. Em seguida, vamos armazená-lo em uma constante. Nome do caminho Cs equ use o nome do caminho. Agora, o nome do caminho armazenará o URL ativo. Agora temos o URL ativo armazenado no nome do caminho. Temos que fazer uso disso. Quando você vem aqui, o que devemos fazer é fazer com que C seja uma equação ativa Path name dot, dentro do gancho use path name, temos um método chamado start with. Agora vamos aceitar um método chamado start with. E então vamos fazer um link para o HREF. Agora que não estamos obtendo o URL atual, o que precisamos fazer é estilizar condicionalmente o link com base no É muito simples fazer isso. Dentro da classe aqui, vamos substituir isso pelo colchete C porque vamos fazer muitos scripts java no meio Se estiver ativo, é verdade, o que vamos fazer é fazer com que o texto seja amarelo 400. Em seguida, podemos alterar a fonte para serif. Vamos tornar isso um pouco ousado. Caixa de painel frontal. Você pode estilizá-lo e torná-lo mais bonito do seu jeito Caso contrário, o que fazemos? Nós vamos te dar a cor do texto azul por cem. Ao salvar o aplicativo, confira o navegador. Opa, remova o gráfico no nó. Tudo bem, pessoal. Deixe-me mostrar uma coisa dentro do console. Você pode ver que o erro de usar o nome do caminho só funciona no componente cliente. Por padrão, o próximo gás é executado no lado do servidor. Se você quiser usar ganchos, precisará alternar da renderização do lado econômico para a renderização do lado do cliente É extremamente fácil fazer isso. Entre aspas simples, vamos usar ****. Simples assim. Você pode finalizá-la com a coluna sem, se desejar. Quando você salvar novamente, vamos ver o que temos agora. Tudo bem. Vamos dar uma olhada no navegador. E eles são esses. Mas antes de prosseguirmos com a demonstração, quero mostrar algo muito importante. Quando eu recarrego a página no canto inferior esquerdo da tela, você verá o alerta de erro. Quando você clica para abrir, ele diz: O conteúdo do teste não corresponde ao HTML renderizado pelo servidor Algo está errado nos bastidores. Vamos voltar ao código. W no layout que TSS. Temos que fazer alguma coisa. Vamos tirar esse HGM aqui. Tire isso. Aqui vamos substituir o corpo por um fragmento. Então, você só precisa destacar o corpo e, em seguida, comandar D para fazer uma seleção múltipla limpá-lo. Salve o aplicativo. Rapidamente, vamos dar uma olhada no navegador. Recarregue e o erro desaparecerá. Ao observar a tela com atenção, você verá o login do cadastro e esqueceu a senha Vamos tentar clicando no login. Quando você clica, consegue ver? Agora, na barra de endereço, você perceberá que o login está ativo no momento. Para isso, isso deve ser destacado. Além disso, ao clicar na senha, o URO ficará ativo e aqui será selecionado. Está ativo aqui, e assim por diante, registre-se, faça login, esqueci a senha 23. página de erro (arquivos especiais): S. Nosso aplicativo funciona perfeitamente bem quando você navega para localhost 3.000 blogs de barra, s um, barra de comentários, barra um E isso nos levará até onde temos os comentários de uma postagem no blog. Então, todos vocês sabem que às vezes um erro pode ocorrer em seu aplicativo, certo? Então, vamos supor que você esteja tentando encaixar o primeiro comentário na primeira postagem. E então você acaba de encontrar um erro. Para demonstrar esse exemplo, nós mesmos precisamos criar um erro no aplicativo. Abra o explorador e, em seguida, o ID da postagem do blog, as comunicações e o ID de recomendação Abra o comando B desse cara para fechá-lo. Agora vamos criar rapidamente um erro. Aqui, vamos ter uma função. Obtenha um aleatório. Vou fazer uma contagem. Então, o que devemos fazer é retornar o fluxo de pontos de Matt. Este é apenas um script Java básico que você deve conhecer. Então matt dot random beautiful. Tendo feito isso, venha aqui. Vamos armazenar rapidamente o aleatório em uma constante. Const Random igual, obtenha Random. É exatamente aqui que lançaremos o erro. Se aleatório for igual a um, geraremos um novo erro. Erro ao carregar este comentário. Agora terminamos com isso. Vamos dar uma olhada rápida no navegador. Vamos recarregar E nós temos isso aqui, erro ao carregar esses comentários. A intenção de criarmos esse erro é ver como podemos lidar com um erro no futuro quando ocorrer um erro. Então, por exemplo, alguém visita seu site e está tentando processar algo. De repente, aparece um erro assim. A pessoa perderá a confiança nesse site imediatamente. Está bem? Portanto, se houver algum erro no projeto, devemos ser capazes de lidar com esse erro sem quebrar o aplicativo. Porque aqui, o aplicativo está quebrado. Mesmo quando você recarrega, olha, o aplicativo está quebrado Então isso não é profissional. A melhor coisa que devemos fazer é capturar esse erro e exibi-lo na interface do usuário para que os usuários possam ter uma experiência melhor. É exatamente assim que podemos lidar com esse erro profissionalmente. Então você volta ao código VS. Abra o explorador. Dentro do ID do comentário, esse cara, clique com o botão direito. Novo arquivo. Vamos chamar esse erro de ponto TSX Dentro do ponto de erro TSS, vamos identificar rapidamente o limite do erro RFC para gerar o componente funcional. Mas desta vez, vamos chamá-lo limite de erro, assim E então, aqui na interface do usuário, teremos uma tag He one. Então, dentro, teremos uma tag H one e, em seguida, faremos um erro no ID do comentário. Portanto, temos que mudar do lado do servidor para o lado do cliente. SF novamente no navegador, tudo bem. Agora diz erro no ID do comando. Anteriormente, quando implementávamos um erro em nosso projeto, todo o aplicativo era interrompido e, em seguida, víamos o erro irritante na tela Essa é uma experiência muito ruim para oferecer aos seus usuários. Está bem? Então, por exemplo, você visita o site para comprar algo e, de repente, o site quebrou e você vê um monte de linhas vermelhas em todos os lugares, reclamando de um erro Acredito que você perderá a confiança nesse site. Portanto, a melhor maneira é apresentar o erro aos usuários de uma maneira muito profissional. E foi exatamente isso que fizemos aqui, ok? Então você pode voltar ao seu projeto e personalizar o erro do jeito que quiser, ok? Então você pode dar o nome da classe, por exemplo, então você pode fazer P quatro, Bg vermelho, digamos 200. Texto, é Excel, é Excel. Vamos ver o que temos agora. Recarregue, recarregue de novo e de novo. Então você vê um erro no ID do comando. Isso é exatamente como lidar com erros no próximo gs. Outra coisa que você pode fazer é exibir o erro programaticamente Temos uma prop aqui chamada error, e a prop é do tipo Feito isso, o que precisamos fazer aqui é exibi-lo na interface do usuário. Vou exibir a mensagem de erro de erro do. Quando você salva e finaliza a compra no navegador. Houve um erro ao carregar esses comentários, e o material está vindo desse lugar aqui. Estamos recebendo a mensagem de erro daqui. Tudo bem, isso está desligado por enquanto. Nos vemos na próxima atração. 24. Modelo vs layout: O arquivo de modelo é semelhante a um layout , pois envolve cada layout ou página secundária Ao contrário dos layouts que persistem em todas as rotas e mantêm seu estado Os modelos criam uma nova instância para cada um de seus filhos na navegação, que simplesmente significa que o estado do aplicativo será alterado quando você navegar para uma nova página Para obter uma compreensão profunda de como o modelo funciona, definitivamente precisamos colocá-lo em prática comparando-o com o layout. Vamos implementá-lo rapidamente. Comando B para abrir o explorador. Tudo bem. Então eu acho que devemos fazer isso dentro do registro, que é a terra, certo? Então, vamos fazer alguma coisa. Ok, então abra o bot e, em seguida, esse layout aqui. Vamos implementá-lo porque esqueci a senha, o login, cadastro, tudo isso vai para o layout. Vagabundo Precisamos de estados em nosso aplicativo para demonstrar esse exemplo. Vamos imputar rapidamente o gancho usado do react. Vamos declarar rapidamente as variáveis e a função seta para atualizar o estado Aqui, eu vou fazer Cs impute Ca set impute. E o estado inicial será uma string vazia. Claro, você deve saber disso começando pelo react. Feito isso, vamos implementá-lo rapidamente no projeto. Agora vamos ter um df dentro desse dif, vamos ter um puxão imputado Especifique o valor. O valor será imputado. Na mudança, o que significa que quando o usuário começa a digitar no campo de impute, temos que pegar os dados. Agora vamos ter acesso ao evento. Com a ajuda do evento, chamaremos a função seta para atualizar o estado inicial e, dentro da função seta, teremos que usar o evento para segmentar e obter o valor. Simples isso. Por fim, temos que fechar o impute com uma tag de fechamento automático Vamos rapidamente dar um estilo a ele. Um pouco de estilo para fazer com que pareça bonito. Nome da turma, vou fazer um esboço. Queremos que a esquina seja um pouco arredondada, então vamos torná-la arredondada SM. Feito isso, vamos dar uma olhada rápida no navegador. Agora vamos fazer o Localhost três e depois nos registrar. E agora você pode ver a imputação aqui. OK. Vamos fazer alguma coisa. Vamos dar o nome dessa classe div. Vamos especificar que o preenchimento seja quatro. E bom. Tudo bem. Dê uma olhada. Agora temos o Impute aqui. Vamos digitar rapidamente algo no campo Impute. Dublagem digital. Quero que você observe o comportamento quando eu navego até a página de login. Então eu clico na página de login. Deixe-me te mostrar. Estamos na página de login. Olha, você pode ver que o estado não foi alterado. Ao navegar também para esquecer a senha, você perceberá que o estado também não foi alterado O layout mantém um estado consistente dentro do projeto. Você pode ver, mesmo quando você clica em login, quando clica em registrar, e o estado não é alterado Esse é o estado do cabelo. Agora, queremos substituir o layout pelos modelos e, em seguida, podemos observar o comportamento para entender a diferença entre o layout e o modelo. Tudo bem. Vamos fazer isso rapidamente. C e B para abrir o Explorer. O que precisamos fazer é clicar com o botão direito do mouse e renomear, limpar o layout e, em seguida, vou fazer template.tss Estrondo. Temos que dizer sim a isso. Agora, salve o projeto no navegador. Vamos recarregar rapidamente. Tudo legal. Agora, vamos tentar e eu vou fazer Duba digital Quando você clica em login, você vê que, ao navegar, o estado é destruído. Essa é exatamente a diferença entre o modelo e o layout. 25. Carregando a página (arquivos especiais): Arquivos especiais. O arquivo especial que discutiremos nesta palestra é o ponto de carregamento s. O ponto de carregamento S ou TSS ajuda você a criar uma interface de usuário de carregamento significativa com painéis de origem de reação. ajuda você a criar interface de usuário de carregamento significativa com painéis de origem de reação Com essa convenção, você pode mostrar um estado de carregamento instantâneo do servidor enquanto o conteúdo de um segmento de rota é carregado. O novo conteúdo é trocado automaticamente quando a renderização Por exemplo, se um usuário clicar em uma postagem do blog, levará algum tempo para a postagem seja buscada e renderizada na tela Então, enquanto você espera pela postagem, devemos ser capazes de criar uma barra de carregamento para dar ao usuário um tipo de resposta que a postagem está obtendo no momento. Agora você abre o explorador. Vamos implementá-lo rapidamente na pose do bloco. Coloque no bloco, clique com o botão direito e crie um novo arquivo E isso será chamado. Carregando o ponto TSX. Você pode chamá-lo de ponto de carregamento S, dependendo do que você está usando. Quando você pressiona a tecla enter, gere o componente funcional. Vamos criar rapidamente a interface de carregamento. Dê um nome de classe e, em seguida, a altura será 100 Vg O chão do bar BG, Yellow, 800. Opa. Isso vai ser demais. Vamos fazer com que sejam 400. Tudo bem. Feito isso, dentro do HTML interno do D, teremos uma tag H one e, em seguida, faremos o carregamento. Vamos estilizar rapidamente a etiqueta H one também. Texto, é Excel. Texto, azul, 100. A cor do texto é azul e, em seguida, temos que alinhar o teste ao centro Tudo bem, salve o aplicativo. Volte para o navegador. Então, quando clicarmos na funda aqui, antes que a página de bloqueio se abra, você definitivamente verá a página de carregamento Dê uma olhada. Embora seja muito rápido, mas temos que fazer isso de novo. Tudo bem. É exatamente disso que estamos falando. 26. Demonstração de site: Aqui está exatamente o aplicativo que vamos criar neste curso. Agora vamos continuar. No canto superior esquerdo da tela, você verá o menu. Quando você clica, ele abre a gaveta de navegação E quando você passar o mouse sobre os links , eles serão destacados Eu passo o mouse, o portfólio é destacado sobre mim e me contrato. Logo abaixo, temos os links de mídia social e tudo está funcionando perfeitamente conforme o esperado. Na verdade, quando você clica no Instagram, você pode abrir minha página do Instagram. Assim, você pode clicar no ícone X para fechá-lo. Também na parte superior, temos o cabeçalho. Dentro do cabeçalho, temos os links. Ele tem exatamente o mesmo comportamento da gaveta de navegação Quando você passa o mouse sobre ele, ele fica destacado. Quando você clica, por exemplo, quando eu clico no portfólio. A rolagem será suave até componente do portfólio e , em seguida, esse link será destacado. Dê uma olhada. Veja, agora estamos dentro do componente de portfólio, e esse link de portfólio aqui está destacado. A mesma coisa aqui, e quando você volta para casa é exatamente o mesmo comportamento. Diga-me, não parece bom? Claro que sim. Vamos continuar. Na extremidade esquerda da tela, você tem meu nome e minha empresa Além disso, temos o botão do projeto e o botão Obter currículo O projeto butting faz exatamente a mesma coisa com o link do portfólio aqui Quando eu clico no projeto, ele também rola suavemente até o componente do portfólio. Quando eu clico no botão Obter currículo, ele vai baixar meu currículo. Dê uma olhada. Você pode ver o download? Vamos dar uma olhada rapidamente. Aqui está. Linda volta ao projeto. Aqui temos a foto do perfil. Logo na parte inferior, temos a caixa inclinada. Vamos abordar rapidamente o componente do portfólio. Quando eu clico no projeto, dê uma olhada. Linda. os vários projetos em que trabalhei. Temos o am Food Company, o site do portfólio do próximo ano, que é esse site que estou apresentando, e assim por diante Assim, posso clicar em cada item do cartão para abri-lo em uma única página. Agora, quando eu mover esta carta, você verá esse ícone aqui como os olhos. Clique para abrir e aqui está a página de detalhes do portfólio. Isso é o que tenho a dizer sobre o portfólio, a descrição e essas são as tecnologias que usei. Muito interessante. Quando você rola para baixo, podemos clicar no botão para mostrar o próximo projeto. Você pode ver? Dê uma olhada. Além disso, podemos clicar no anterior para mostrar o projeto anterior. Vamos voltar rapidamente ao componente doméstico. A próxima linha final é o componente sobre mim. E esse é outro componente interessante. Está tão linda. Quando você passa o mouse, você vê um lindo efeito de foco Você consegue ver aquela bela animação? Os desenvolvedores de front-end matam, back-end e assim por diante. Você também pode alterá-lo com este botão aqui dentro do cartão. Dê uma olhada. Feito isso, vamos passar para o componente de depoimento Você também pode usar o mouse para deslizar o depoimento. Por fim, temos o componente de rodapé. No canto inferior direito da tela, você verá o botão c to action. Quando eu clico, ele vai para o componente inicial. E agora estou prestes a mostrar uma das características mais importantes do site do portfólio, que é a página HaM Quando você clica no HiaME, ele abre a página do HaE E aqui temos esse lindo artigo. Além disso, temos os cartões mostrando seu endereço, número de telefone, e-mail e horário de funcionamento. Agora, quando eu clico no formulário de contato, ele passa suavemente até a seção do formulário de contato Dê uma olhada. Perfeito. Agora, vamos começar clicando no bot enviado. Quando você clica no embarque enviado, ele solicita que você preencha os campos para o nome D. Para o e-mail, David at tm com Para o número, vou digitar um número aleatório. Para o assunto, eu diria, testando o site. Bem aqui, o que eu vou fazer é então, tendo feito isso, deixe-me levá-lo rapidamente de volta à minha caixa de entrada para maior clareza Aqui mesmo, terei que recarregar novamente porque quero que tudo pareça transparente Agora você pode ver, eu não tenho nada na caixa de entrada. Nenhuma mensagem nova. Volte para o site. Vamos tentar clicando no botão de envio. Eu clico. Ele começa a carregar. Você pode ver esta barra de carregamento aqui? A mensagem foi enviada com sucesso. Obrigado por entrar em contato com um bar D. Vamos voltar para a caixa de entrada e ver o que temos. Agora eu clico para abrir. Então essa é a mensagem de David. Diga-me, não parece bom? Claro que sim. Com certeza, você pode responder David clicando no botão de resposta aqui e a conversa pode continuar. Vamos testar rapidamente o aplicativo em um dispositivo móvel. Você vê, lindo. Você pode clicar no serviço para abrir o conteúdo dos serviços aqui, a empresa, o link sincero e todas essas dicas. Você aprenderá como fazê-las do zero Tampa de rosca, abra a gaveta de navegação. Vamos voltar para casa. Dê uma olhada. Isso é super incrível. Tudo bem. E quando você clica no botão C to action, Boom. Linda. Você pode baixar sua quantia se quiser. Você pode ver isso? Você acabou de baixá-lo agora mesmo. Você pode rolar suavemente até o componente do portfólio e conferi-lo aqui. Tudo bem. Então, tendo feito isso, vamos dar uma olhada no dispositivo iPad. Você pode ver? Isso é tão bom. Isso é lindo. Pode clicar para abrir. Pode atingir o ninho, o ninho e assim por diante. Pode voltar para casa. Eu incluí o link para o site de demonstração, logo na descrição. Simplesmente porque eu também quero que você tenha a experiência de ver o quão rápido e bonito o site é. Na verdade, você merece ser visto. 27. Instalação de Nodejs. Vs instalação de código. Instalando Vs extensão de código: Começando com o site definitivo do próximo portfólio GS. Nesta seção do curso, faremos algumas instalações necessárias para começar. Vamos começar discutindo as versões dos nós. É claro que antes de instalar, reagir ou executar o próximo GS, você precisa ter o node GS instalado em sua máquina. Meu conselho para você é simples. Awats, certifique-se de baixar e instalar a versão estável mais recente Você vê esse cara aqui. Não é para você e para mim. O motivo é que ele vem com complexidades extras que você talvez não consiga gerenciar Então, vamos baixar e instalar rapidamente a versão estável mais recente. Clique, então já estamos baixando, e aqui está. Clique. Vamos continuar. Você tem que passar por todas as coisas se tiver tempo Mas para mim, eu só tenho que continuar. Então eu concordo. Continue pressionando a placa de instalação. Claro, se você é mac, precisa fazer login. Clique em Instalar sofá. Instalação bem-sucedida. Abra o terminal. Dentro do terminal, precisamos verificar e ter certeza de que instalamos o nó. O que vou fazer é o nó V. Isso realmente mostrará a versão do nó que acabamos de instalar. Aperte a tecla. Agora temos a versão 18.17 0.0 do node. Feche isso. A próxima vez é instalar um editor de código, e o editor de código que vou usar no curso é o código VS. Sinta-se à vontade para usar qualquer editor de código de sua escolha. Mas para mim, o código VS é sempre meu favorito. Dependendo do sistema operacional com o qual você está trabalhando. Clique nessa seta e instale para MAC Windows ou linhas. Aqui, estou trabalhando no Mac OS. Só preciso fazer o download para MAC. Eu já o instalei, então não preciso mais fazer isso. Você só precisa ir em frente, baixar e instalar o código VS. Feito isso, vamos abrir rapidamente o código Vs. Ele. Maximize. Agora terminamos de instalar o código VS. Vamos instalar o plugue necessário que será útil no futuro o plugue necessário que será útil no Extremamente importante. Abra a extensão. W no set box, vamos definir para. Trecho de redock de reação reactinativa. Aqui está. Você precisa clicar para instalar. Esse é um atalho que nos ajudará a gerar algum trecho de código. Portanto, não precisamos digitar todas essas coisas do zero Não se preocupe, você definitivamente entenderá a essência no futuro. Ainda não instalei este, feche-o. Novamente, vamos instalar o Pi. Clique para abrir e depois instalar. Basicamente, o Predia ajudará a formatar seu código para recuos adequados Agora que terminamos a instalação, feche-a. E, com certeza, alguns de vocês estão curiosos para conhecer o tema VS code que estou usando. Não se preocupe. Eu definitivamente vou compartilhar com você. Novamente, dentro da caixa de junco, vamos preparar para você Clique para abrir. Eu já o instalei no meu código VS, então certifique-se de instalá-lo no seu computador. Em seguida, o tema real que estou usando. Deixe-me mostrar, clique em Definir tema de cores. Estou usando o U D. Aqui está, então você pode decidir usar qualquer um desses temas aqui. Eles são todos fantásticos. Anteriormente, eu estava usando U mirage. Mas agora estou usando o UDC. Portanto, certifique-se de instalar todos esses plugues, pois eles serão extremamente úteis no futuro Feito isso, vamos passar para a próxima palestra, onde instalaremos a seguir Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 28. Nextjs 13 instalações: Nesta palestra, prosseguiremos com a instalação do próximo S. Antes de prosseguirmos com a próxima instalação do S. Certifique-se de reiniciar seu código VS. motivo é que, na palestra anterior, baixamos alguns plugins Para que esses plug-ins funcionem, você precisa reiniciar seu código VS, e eu fiz isso do meu lado. Feito isso, crie rapidamente uma pasta diretamente na área de trabalho. Clique em, nova pasta. Vou ligar para essa pasta. Portfólio. Arraste e solte essa pasta no código Vs. Saia do trabalho na página. Maximize o código VS, controle para abrir o terminal integrado do código VS Ou você pode ir para o terminal superior de Mw, novo terminal, e então esse cara aqui será aberto Agora temos que prosseguir com a instalação. Então eu vou fazer Px, criar. Em seguida, dê um espaço s. Esse cara aqui vai apontar para o portfólio de diretórios, e ele terá o próximo S instalado dentro do diretório do portfólio. Está na tecla enter para disparar. Aqui, diz, você gostaria de usar o script de tipo? Não, não estamos usando script de tipo. Você gostaria de usar links sim? Sim. Para o vento. Sim. Você pode usar a tecla de seta esquerda ou direita para alternar entre sim ou não. Você gostaria de usar o diretório de origem? Sim. Você gostaria de usar o roteador? Sim. Em seguida, diz: você gostaria de personalizar os hábeis alertas de importação Eu vou dizer que sim. Feito isso, pressione a tecla enter para ativá-lo. A instalação está em andamento. Isso definitivamente demoraria um pouco. Eu só tenho que acelerar a palestra. Em seguida, é instalado, com sucesso. Agora vamos executar o servidor. PM. Execute D. É o boom da tecla enter. Agora, o servidor será aberto na porta 3.000 do Localhost. Aqui está. Você clica no link para acompanhar e aqui está. É assim que o aplicativo Deft next S se parece. Vamos limpar o código. Volte para o código VS. Abra a página SRC. Vamos derrubar o terminal. Vou fazer o comum B para fechar o explorador. Vamos destacar da linha 62 as linhas 110. Não destaquei tudo isso. Só temos que limpá-lo. Seguro. Além disso, não queremos usar nenhum desses caras aqui. Você está seguro, volte para o navegador. Nada é visto no navegador. Comum B para abrir o explorador. Temos que arrumar o CSS global. Clique em bn, selecione entre as linhas cinco até o final. Limpe-o. Salve no navegador, aqui está. Isso está desligado por enquanto. Na próxima palestra, faremos as configurações necessárias. Nos vemos na próxima palestra. Mantenha o foco e tome cuidado. 29. Importação e configurações: Basicamente, quero que cada um de nós alcance exatamente o mesmo resultado. Em termos de fonte, imagens, incluindo o estilo. Abra os recursos do portfólio. Por sua vez, os recursos do portfólio seriam colocados abaixo desta palestra. Abra os recursos do portfólio. Agora, aqui estão alguns dos ativos que vamos usar, incluindo os dados. Abra rapidamente as imagens do portfólio. Aqui estão as imagens e os fundos que vamos usar. Quando você abre o diretório de fontes, temos todo o rect que queremos usar. Linda. Agora, abra o diretório do portfólio. Abra o público. O que vamos fazer é destacar tudo aqui, clicar com o botão direito, copiar. Venha aqui e cole. Temos que substituir, e também, temos que substituir. Esses são apenas os dois itens que substituímos. O próximo SVG e o svg do navio. Terminamos de importar as imagens e as fontes. Mais uma coisa que vamos fazer. Feche isso. Volte para os recursos do portfólio. Abra no próximo diretório. Agora temos o Fundo do Google. Volte para o VS Code. Abra o próximo módulo. Role para baixo e você verá no próximo Open. Vamos minimizar o código VS. O que vou fazer é arrastar essa fonte diretamente para o próximo diretório. Maximize. Você pode ver? Perfeito. Feito isso, ainda estão nos recursos do portfólio. Abra os recursos de código do MD. Vamos copiar a estrela global. Pare nas linhas 72. R clique em Copiar. Volte para o código VS. Também precisamos fechar o módulo do nó. Diretamente no SRC, você encontrará o CSS global Clique para abrir, comande V para colar. Esse é o estilo global que vamos usar durante todo o processo. Com certeza, esse cara aqui é responsável pela marca azul quando o link é clicado no cabeçalho Isso é responsável pela rolagem suave. Portanto, você não precisa se preocupar com as coisas agora. Isso será explicado cuidadosamente no futuro. Então, com segurança, feche-o. Mais uma coisa que vamos fazer é configurar os fundos do Google. Aço dentro do código, os recursos do MD, role para baixo. Temos que copiar as coisas. Volte para o código VS. Abra o ponto do layout S. Não queremos usar os fundos inter Vamos importar fundos locais de at nest slash font slash, Esse cara não é mais necessário. Limpe-o. E agora vamos colar. Feito isso, precisamos sincronizar todos esses fundos com o projeto. Então, aqui, remova o inter, e então vamos fazer pops Ok. Tudo está bem. Então, amigos, por favor, certifique-se de importar todas as coisas corretamente. 30. Estrutura do projeto: O aplicativo criado com o next S e o react segue a abordagem arquitetônica baseada em componentes, que simplesmente implica que os componentes são um dos blocos básicos de construção de cada aplicativo react Nesta palestra, vamos definir a estrutura do nosso projeto seguindo as melhores práticas Na tela está o componente inicial. Na parte superior, temos o componente de cabeçalho. Quando você rola para baixo, também temos o componente de trabalhos recentes. Há algo que eu quero te mostrar aqui. Dentro desses componentes, quando você clica em qualquer um desses cartões, deixe-me mostrar. Ele passará os dados correspondentes para uma nova página. Podemos dizer que temos uma página de portfoli Datos, ou você pode chamá-la de uma única página ou você pode chamá-la de uma única Isso abrirá nossos olhos para o sistema de roteamento dinâmico nos próximos anos Volte para casa. Já temos o componente de trabalhos recentes. Agora temos o componente sobre mim. Temos o componente de depoimento. Por fim, temos o componente de rodapé. Ao observar o canto inferior direito da tela, você verá o carro em ação batendo, e isso também é um componente Podemos torná-lo um componente reutilizável no futuro. Quando eu clico no botão do carro para acionar, ele rola suavemente até o componente inicial Aqui está. Linda. E quando eu clico em H i am, também abrirá uma nova página. Portanto, podemos dizer que temos duas páginas diferentes neste aplicativo e vamos ver quantos componentes temos aqui. O componente do cabeçalho é um, depois o componente inicial é dois, três, quatro, cinco, seis. No canto inferior direito da tela, temos o componente de ação do carrinho. Agora, no canto superior esquerdo da tela, temos o componente de desenho diagonal. Os componentes de desenho diagonal também podem ser encontrados nos componentes do cabeçalho. Dito tudo isso, vamos criar as pastas correspondentes que serão mapeadas para esses componentes. Abra o SRC, diretamente no diretório do aplicativo, clique com o botão direito do mouse em nova pasta e vamos chamá-la de componentes Dentro dos componentes, clique com o botão direito, nova pasta. Vamos criar o diretório de cabeçalho para o componente de cabeçalho. Ganhe os componentes, temos o componente doméstico. Novamente, clique com o botão direito, nova pasta. Temos o Abt M, temos o cartão deslizante e o cartão deslizante será mapeado para o componente do portfólio Deixe-me te mostrar. Esse é o componente do portfólio, então todas as coisas estão aqui Bom. Novamente, estamos nos componentes Novo, o componente de contato. Teremos o componente de ação curta. Deixe-me te mostrar. No canto inferior direito da tela, você verá a ação curta batendo Quando eu clico nesse botão, ele vai rolar suavemente até o componente inicial, e aqui está. Linda. Quando você rola para baixo, o botão aparece. Por fim, teremos o componente f. 31. Configuração de layout doméstico: Bem-vindo de volta à aula. Nesta palestra, vamos projetar o componente doméstico Abra rapidamente o componente e, dentro desse diretório, clique com o botão direito do mouse no novo arquivo. Vamos criar um componente chamado componente doméstico dot gs. Se você tiver o trecho de redox do react antive react, ao fazer RR de C, você deve ser capaz de gerar Linda. Feito isso, vamos renderizar rapidamente o componente na página principal, e aqui está a página principal. Clique para abrir. Bem no topo. Temos que importar o componente doméstico do componente doméstico do componente doméstico do componente. Isso é simples assim. Então temos que renderizá-lo aqui. Sf. Vamos ver o que acontece no navegador, e aqui está o componente inicial. Linda. Vamos continuar projetando o componente doméstico. Comum B para fechar o explorador. Não vamos usar um pai simplesmente porque não queremos um nó extra em nossa árvore. Limpe-o. O que vamos usar é o fragmento de reação. Bom. Ganhe o fragmento, vamos ter um dv, dar-lhe uma identificação, voltar para casa, fechar o Vamos criar o layout. Aqui vamos ter um obsoleto em linha. O gradiente linear da imagem de fundo. Queremos girá-lo em 62 graus e a cor da esquerda será zero 50% Coloque um coma aqui mesmo. Vamos dar a ele uma altura mínima de 500 pixels. Separe-o com o coma, a altura máxima será de 1.200 pixels Você tem que separá-lo com o coma. Vamos especificar a altura real, a altura será 100%, a largura 100%. Quando você salva no navegador, aqui está. Linda. 32. Design de item doméstico: Na palestra anterior, conseguimos configurar o layout Nesta palestra, vamos prosseguir com o design. Onde no código VS, a primeira coisa que vamos fazer é importar a fonte hind Eu vou fazer a importação. É uma exportação nomeada. Vamos dar uma dica da próxima barra de fontes do Google. Então aqui eu vou fazer const int equ, hindi. Nós, no objeto, teremos o subconjunto. Vamos ter o latim, separado por vírgula Opa. OK. Bom. O quê 300400500600 e, por último, 700 e, por último Opa. Dê uma olhada. Tudo bem. Terminamos de configurar a fonte. Vamos continuar com o design. Aqui, vamos ter um d, dê a ele um nome de classe. Queremos que esse dv seja responsivo em todas as plataformas. Para isso, vamos torná-lo um contêiner. Então, imagine, vamos configurá-lo para automático. Obviamente, se você quiser ver o equivalente em CSS, tudo o que você precisa fazer é passar o mouse sobre a classe do utilitário R W no intellisens. Você verá o equivalente em CSS. Se, do seu lado, você não tiver o intellisens, tudo o que você precisa fazer é abrir o Explorer Em seguida, clique nas extensões. Na caixa de pesquisa, você procurará por tail wind intellisens E aqui está. Eu já o tenho instalado. No final, você só precisa apertar o botão instalado. Como você pode ver aqui, o botão instalado está desativado. É por isso que você pode vê-lo desinstalado. Instale o tail wind intellisens e vamos nos divertir Feche isso. Certifique-se de proteger também. Vamos fechar o explorador. Vamos ter outro df, dê a ele um nome de classe. Vamos fazer com que ela exiba a grade. A coluna do modelo de grade é 12. Agora vamos ter outro df, nome da classe. Vamos definir a cor de fundo como branca. Vamos fazer com que ele seja exibido de forma flexível, direção flexível é Justifique o conteúdo, centralize. A coluna do modelo de grade é 12. Vamos estilizá-lo em um dispositivo médio. Em um dispositivo médio, a coluna do modelo de grade é cinco. Por fim, para este D em um dispositivo médio, queremos que o fundo seja transparente Seja transparente. Feche isso. Bom. Vamos formatar rapidamente o código para obter o recuo adequado. o botão direito. Formatar a largura do documento. Priya. Você pode ver? Perfeito. Eu amo isso. Quando deve, nós vamos ter outro deve? A margem será para. Com isso, tudo o que temos dentro desse df será centralizado Com isso, o df será responsivo em todas as plataformas Ensinar é bom, lindo. Outro df. Em um dispositivo grande, teremos o espaçamento esquerdo em 24, que em equivalentes reais de CSS, o preenchimento esquerdo será de seis m. Em um dispositivo pequeno, o preenchimento esquerdo será de dez. o preenchimento Então, o preenchimento real à esquerda será zero. A parte superior acolchoada e a parte inferior do acolchoamento são 20. Em dispositivos médios, pague zero. A parte superior acolchoada e a parte inferior acolchoada serão zero. Assim como em dispositivos médios, o teste alinhará o início Também temos que alinhá-lo ao centro. Bom. Agora vamos ter uma etiqueta P. Deixe-me te mostrar. Essa é a tag P aqui, a i D. Dentro do HTML interno, eu vou fazer i. Dê a ela um nome de classe. Mas agora vamos usar a interpolação de strings. Abra e feche o suporte CO, dentro do suporte C, abra e feche o suporte traseiro A propósito, a tecla b está localizada no canto superior esquerdo do teclado, logo abaixo da tecla escape. Aqui vamos ter que testar. A cor do teste será azul claro. Vamos ter 47 A EDE. Digamos que dê uma olhada e aqui está. Linda. Em T wind Css, sempre que você quiser implementar um estilo personalizado, tudo o que você precisa fazer é abrir e fechar o colchete e, em seguida, fazer o que quiser dentro do colchete Teste o Excel. Isso será mapeado para o tamanho da fonte e as alturas das linhas. Em dispositivos médios, teste d b. No dispositivo grande, o teste será o texto dois do Excel. Quando você salva no navegador, ótimo. Você pode ver? Mas o problema aqui é que não queremos usar essa fonte. Para isso, vamos ter a fonte aqui. Eu vou fazer o nome da classe em hind dot. Ao salvar, confira no navegador e pronto. Algo mudou. Eu adoro isso. Agora, a linha de nidificação é essa. Vamos implementá-lo com a etiqueta hedge one. Depois da etiqueta P de fechamento, teremos uma de cobertura Vamos dar a esse hedge um nome de classe. Vamos especificar a cor do teste. A fonte será preta reta. O tamanho do teste. Vamos fazer com que cinco se sobressaiam. Em um dispositivo médio, o tamanho da fonte será cinco excel. Em um dispositivo grande, a fonte será sete Excel. Em um dispositivo extra grande. Além disso, o teste será texto, sete Excel. A margem tb será cinco. Em dispositivos médios, a margem tb será três. O que na tag He one, vamos fazer? Eu sou um H six. Ao economizar, dê uma olhada e pronto. Linda. Depois da tag He one, teremos uma tag H two. Vamos fazer isso para ter o sinal ND e um instrutor Esse é o resultado por enquanto. Vamos dar uma olhada em um dispositivo móvel. Dê uma olhada. É extremamente responsivo em todas as plataformas Linda. Vamos voltar rapidamente ao código. Vamos dar o h ao nome de uma classe. A cor do teste será exatamente a mesma coisa aqui. Copie e cole. Colocar na parte superior e dar tapinhas na parte inferior serão duas A fonte ficará em negrito e, em seguida, faremos com que ela se transforme em vantagens. Em dispositivos médios. O teste será x l, então a altura da linha e o tamanho da fonte serão 1,25 ram Acho que isso é tudo para a tag H two. Mais uma coisa que vamos fazer é usar a interpolação de strings Assim mesmo. Então bati bati Ganhe o bati, temos que copiar essas fontes, destacar e colar Quando você salva no navegador, temos esse resort. Estou amando tudo. A próxima linha é implementar os Butings. Para implementar os batings, vamos usar a tag A. Após o fechamento da tag H two, teremos uma tag A. Mas na etiqueta A, vamos fazer projetos. Vamos dar o nome da classe. Desta vez, vamos usar a interpolação de strings por causa dos fundos que estamos Vamos colocá-lo em um bloco de linha, o fundo, vamos usar esse plano de fundo Faça a transição de tudo. A duração da transação, faça com que seja 300, e a animação será ativada e finalizada Queremos que as bordas dos parafusos sejam um pouco curvas Vou fazer um Excel arredondado. O teste dentro do aparafusamento será inteligente. Colocando a parte superior e partindo a parte inferior, serão três. Além disso, dando tapinhas para a esquerda e partindo para a direita, serão cinco Agora, quando você dá uma olhada no fundo, você tem algo lindo assim Eu gosto disso. Tudo bem. Estamos progredindo. Acabei de notar uma coisa. Não gosto de como as bordas são curvas . Então, vamos voltar aqui. O arredondado, vamos torná-lo arredondado G. O G arredondado fará com que o raio da borda seja de 0,5 ram Quando você salva no navegador, esse é exatamente o resultado esperado. A fonte ficará em negrito, margem superior, vamos torná-la oito Vamos fazer com que ela se transforme ou case. Aqui está. Por outro lado, vamos estilizá-lo rapidamente em dispositivos móveis Em dispositivos médios, a parte inferior e a parte superior acolchoadas serão dois dispositivos grandes, P Além disso, dispositivos grandes, o preenchimento esquerdo e o acolchoamento direito, serão oito Vamos reduzir o tamanho do teste em dispositivos médios. Tab de teste, Excel e dispositivos grandes. Tag de texto B. Acho que terminamos com a capacidade de resposta móvel para o botín. Mais uma coisa. Em dispositivos médios, a margem superior será cinco. Em dispositivos muito grandes, a margem superior será dez. Por último, também temos de fazer uso desse fundo. Esse fundo. Copie, venha aqui e cole, seguro, e aqui está. Agora, quando você passa o mouse sobre o botina, nada acontece. Vamos implementar rapidamente o efeito de foco. Quando você passa o mouse na parte inferior, queremos mudar o plano de fundo Nós vamos fazer BG. Ou uma sombra da Coluna Nova da LG Em Hova traduza Y one. Acho que isso é tudo por causa do efeito Hova. Ao salvar no navegador, dê uma olhada. Você pode ver, eu amo isso. Quando você Hva, você vê esse lindo efeito. Agora, o que vamos fazer é destacar a tag A e depois duplicá-la, ou você pode destacar copiar e colar Agora, vamos mudar isso para o meu currículo. Obviamente, a cor do plano de fundo vamos mudar a cor do plano de fundo. Então, não, também temos que mudar a cor de fundo. Vamos mudar para azul claro. Porque ao salvar e conferir no navegador, você vai perceber que esse cara aqui é preto, certo? E mais uma coisa, não há espaço entre esses dois botões. Então, o que eu vou fazer aqui é vir e depois fazer Mag à esquerda, dez O ML que eu amo tanto é o das mensagens Bs. Um direito. Eu falo demais. Quando você salva e ouve o. Agora temos espaço entre os bastões. Vamos especificar o cursor como ponteiro. C você salva. Confira. Bom. Agora você vê essa linda mão apontando para o currículo. Copiar. Venha aqui. E cole. Salvar. Agora, vamos implementar a funcionalidade de retomada de download. Ganhe a tag A, vamos especificar a referência do hipotexto HDF, vou fazer um PDF com pontos de CV. Queremos que ele esteja disponível para download. Eu vou fazer o download equ. Quando o currículo estiver sendo baixado, queremos mostrar esse nome e seguida, o nome do PDF do currículo. CF, vamos dar uma olhada. Lindo, você pode ver? E ele é isso. Perfeito. Estou adorando cada pedacinho dessas coisas. Exatamente em que parte do projeto. Vamos implementar o HRF. Ele ref equ, um sinal de libra e, em seguida, portfólio. Porque quando clicamos nesse botão, queremos ser direcionados para o componente do portfólio. Por enquanto, não temos o componente de portfólio. Mas, no futuro, quando criarmos o componente do portfólio, definiremos o ID do componente do portfólio com exatamente a mesma palavra de um portfólio H. Então, ao clicar nesse botão, você rolará suavemente até o componente do portfólio. Após o fechamento, deve ser a cor de fundo branca, fica aqui. Vamos implementar a imagem. Vamos ter um d, dê a ele o nome da classe. No nome da classe, vamos chamar um intervalo 12. O topo da patente será. Queremos especificar uma parte superior de preenchimento personalizada. Vamos fazer com que seja de um t pixels, e isso será em um dispositivo médio. Preenchimento de 50 pixels na parte superior. Em um dispositivo médio, queremos que a cor de fundo da imagem seja transparente. A cor do fundo da barra será azul mais claro. Vamos fechar o D. Vamos torná-lo responsivo na plataforma móvel Em um dispositivo médio, o intervalo de chamadas é sete. Onde o D, teremos outro D. Especifique o nome da classe Vamos torná-lo um contêiner para que possamos tê-lo responsivo em nossas plataformas Então, a margem será automática. Nesse caso, no DF, vamos chamar a imagem. IMG, SRC, equ, barra, PNG de pontos Psi. A propósito, todas as paradas podem ser encontradas aqui mesmo, no diretório público. Lembre-se de que o importamos na aula anterior. Aqui está meu currículo. Aqui estão algumas das imagens que vamos usar. Você pode abri-lo e depois conferir ao seu lado. Vamos fechá-lo. Quando você salva no navegador, aqui está. Isso não é lindo? Vamos fazer as configurações necessárias para a imagem. Essa é a codificação, vamos fazer dela uma sincronização. Se o link da imagem estiver ruim, precisamos exibir alguma coisa. Eu vou fazer aqui tortas de perfil. Clique com o botão direito do mouse em formatar documento com Pred. O código parece extremamente Quando você salva, esse é o resultado final. Vamos dar uma olhada em um dispositivo móvel. Tudo bem. Gente, isso parece bom. Honestamente, parece bom. Dê uma olhada. No iPad. Oh, meu Deus. Isso é lindo. Eu amo isso. Tendo feito isso. Na próxima palestra, prosseguiremos com a implementação da caixa inclinada Nos vemos na próxima palestra. 33. Implementação de controle deslizante de caixa de habilidade: Vamos prosseguir com a implementação da caixa de inclinação. Antes de prosseguirmos, precisamos fazer algumas instalações necessárias. Vença o terminal contra C para parar o servidor atualmente em execução. Vamos instalar o MPM, slick, react, slick e, em seguida, também instalaremos o slick coser Pressione a tecla enter para acender o fogo. E, por favor, certifique-se de que sua conexão com a Internet esteja ligada. Instalação bem-sucedida. Vamos reduzir isso um pouco. Desça até a parte superior. Agora vamos fazer as entradas necessárias Vamos usar slick crus slash, slick slash, slick.cs Outra, vamos colocar slick carer slash slick slash, slickthem dot CSS colocar slick carer slash slick slash, slickthem dot CSS. Finalmente, vamos importar o controle deslizante do react slick. Simples assim. Feito isso, vamos copiar rapidamente as configurações do controle deslizante Abra o recurso de código dot MD. Destaque, copie, volte ao código FS e, dentro do componente, vamos colar. Deixe-me explicar rapidamente. Role até o topo. Aqui temos uma configuração verbal e, dentro do objeto, definimos o infinito como verdadeiro. O slide a ser exibido será seis. O slide para rolar é um e a velocidade é de 2 segundos. Setas, configuramos para fs, reprodução automática será verdadeira E então a velocidade de reprodução automática é de 2 segundos. Então aqui temos o loop, configuramos o loop como verdadeiro e, em seguida, o Css é linear. Depois de fazer tudo isso, também queremos que ele seja responsivo em todas as plataformas No ponto de interrupção de 17 60, temos que reiniciar o controle deslizante O slide a ser exibido é seis, o slide a rolar é um, infinito é definido como verdadeiro e os pontos são definidos como força Em um ponto de interrupção de 60, também precisamos redefinir as configurações, mas, neste caso, acho que é exatamente o mesmo com 17 60. E assim por diante e assim por diante. E aqui temos o slide para mostrar que são quatro. Deslize para rolar é um, e o infinito e o ponto são definidos como verdadeiro e falso. Então, continuamente e assim por diante. Ainda não configurei o carrossel. A linha de aninhamento é para implementar os itens em si. Role para baixo. Logo abaixo, teremos outro d, fornecendo o nome da classe. Vamos torná-lo responsivo em nossa plataforma. A margem será de. Vamos ter sua posição absoluta. Agora vamos ter outro df. Nome da classe, P x três. Isso implica que o preenchimento esquerdo e direito é 0,75. Feche, logo abaixo de d, teremos outro d, dê a ele um nome de classe. Vamos ter sua posição relativa. O maxi max S n. Depois o fundo. Abaixo, temos que especificar uma estadia personalizada. Vamos fazer 70 pix. Em dispositivos médios, MD, coluna, Max, cinco excel. Em dispositivos muito grandes. Vamos fazer com que ele tenha um máximo de seis células. Padin à esquerda e à direita serão quatro. Vamos fazer com que sejam cinco. Mas em um dispositivo grande, queremos que seja o Px 14. Overflow, vai ser auto x auto. A margem esquerda direita é automática. Novamente, vamos especificar o BG, que é o plano de fundo. BG branco. Então, vou fazer o d arredondado para o Excel. Queremos que o canto da caixa de esqui tenha um pouco de curvas E o índice z (índice z) será 20. Tudo bem Feche o dispositivo. Dentro desse d, teremos os itens. Vamos executar o aplicativo para ver o resto final. Tudo bem O que vamos fazer agora é. Por favor, um comentário sobre a entrada, a entrada do controle deslizante Ainda dentro do Steve. Vamos usar o estilo embutido. Estilo. Vamos especificar a sombra da caixa. 25 pixels, 50 pixels e dez pixels à direita. Estamos apenas definindo a sombra da caixa redonda da esquerda para a direita, de cima para baixo. Quando você salva e vamos ver, certo. Está saindo um pouco. Vamos colocar algo dentro para que você possa ver. Agora vamos ter outro d, dando o nome da classe. Queremos que a parte superior e a parte inferior sejam dez. Em um dispositivo médio, dar tapinhas parte superior e na parte inferior serão seis, em um dispositivo menor, PY Cross, um corvo do dia. Linda. Eu vou te mostrar no GP, então você não precisa se preocupar com isso Agora, quando você confere o navegador, aqui está. A caixa inclinada está pronta. E quando você passar o mouse na caixa inclinada, perceberá que seu custo mudará Dê uma olhada. Parece o sinal da cruz. Você pode ver? Bom. Portanto, isso é responsável pelo curso ou pela mudança. Tudo bem, então vamos rapidamente exibir os itens dentro da caixa inclinada IMG, SRC, e qu, slash, Mongo E, a propósito, importamos todas essas imagens na aula anterior Então, quando você abre o público, você sempre pode ver todas as imagens que usamos aqui. Tudo bem Vamos fechá-lo. T é igual a Mongo db. Vamos dar o nome da classe para que possamos estilizá-la Basicamente, o que vamos fazer é especificar a altura. Feche-a com a etiqueta de fechamento automático, destaque-a e duplique-a seis vezes. Quando você salva no navegador e nos anúncios. Não se preocupe, vamos juntar tudo. Agora, aqui, vamos alterá-lo para reacts png. Vamos exibir os próximos gs. Opa, eu deveria ter destacado esse também. Próximo. Doutor PN. Então, teremos aplausos expressos. Aqui, teremos notas. Vamos fazer aqui express es. Quando você salva, e aqui estão todas as mortes. Opa. A nota S não está aparecendo. T há algo errado lá. Deve ser anotado com J dot PNG. Você precisa especificar o formato da imagem. Agora podemos exibir os crânios. Vamos fazer com que deslize rapidamente. Role até o topo. Vamos elogiar as coisas aqui. SF, e para as configurações, agora temos que aplicar todas essas configurações A maneira como fazemos isso é, na verdade, muito simples. O Win faz D. Vamos renderizar rapidamente o controle deslizante. Dentro do controle deslizante, vamos distribuir as configurações Feche, destaca a tag de fechamento. Corte isso. Venha aqui e depois cole. Quando você salva no navegador, opa. Que diabos? Oh, meu Deus. Ele diz que superexpressão deve ser conhecida ou funcionar. Então, vamos parafusar até o topo. Deixe-me verificar o terminal. Módulo Ro. Tudo bem, pessoal, temos que fazer algo dentro dos pontos da página Feche o terminal. Abra o ponto da página S. Simplesmente porque estamos renderizando o componente inicial dentro das páginas Temos que mudar da renderização do lado do servidor para a renderização do lado do cliente Então, no topo, vamos fazer nossos clientes. Assim mesmo. Vamos limpar isso. Tudo bem Novamente, vamos dar uma olhada no navegador. Você pode ver? Tudo está funcionando perfeitamente, conforme o esperado. Isso é super incrível. Incrível. 34. Evento de janela de rolagem: Bem-vindo de volta à aula. Nesta palestra, continuaremos com o componente de cabeçalho Rapidamente, dentro do cabeçalho do diretório. Vamos criar um novo componente, header dot JS. Código VS, comando B para abrir o explorador. Componente SRC. E aqui está o cabeçalho. Clique em novo arquivo. Ponto do cabeçalho S. Novamente, dentro do cabeçalho, crie um novo arquivo. Pontos diagonais da gaveta, Gs. Por fim, gaveta diagonal C S. Beautiful. Feche o arquivo CSS. Além disso, feche a gaveta diagonal. Agora vamos fazer o RFC para gerar o componente funcional O cabeçalho permanecerá consistente em todo o projeto. Portanto, temos que renderizá-lo dentro do layout. Abra o layout. Vamos rapidamente. Cabeça a partir do componente de barra de pontos do aplicativo barra cabeçalho da barra cabeçalho da barra Vamos renderizá-lo na parte superior das crianças. Aqui vamos renderizar o cabeçalho. E aqui está. Você consegue enxergar a beleza? Basicamente, o que vamos fazer nesta palestra é obter a posição inicial do aplicativo no eixo y. Vamos fazer isso rapidamente. Volte para a cabeça nos pontos s. Feche o explorador. Deixe-me ampliar um pouco. Bom. Primeiro, temos que importar o efeito de uso e o gancho usado. Por esse motivo, vamos mudar da renderização do lado do servidor para a renderização do lado do cliente Vamos fazer um cliente. Simples assim. Coloque uma vírgula aqui, p e feche o colchete co Vamos importar o efeito de uso. Ca. O gancho estadual. Agora vamos declarar as variáveis de estado necessárias a serem usadas Dentro do componente, vamos fazer const selected index one, C set selected index one Equ, o estado, o estado inicial será zero. Novamente, teremos const aberto. O assento do carro está aberto, equ. O estado inicial será força. Vamos declarar a variável de estado para obter a posição do aplicativo em y xs. Vamos definir o custo bruto e o estado inicial será a força. Linda. Para demonstrar esse exemplo. Só precisamos duplicar os componentes domésticos para que possamos rolar Vamos abrir os pontos da página. Componentes da página inicial. Eu só tenho que duplicá-lo três vezes. E, por favor, isso é, por exemplo, saquê. Quando você salva, agora podemos rolar o aplicativo. Eu só quero demonstrar isso para que você entenda bem o suficiente. Volte para o código, feche o explorador. A ideia é simples. Quando o aplicativo no deslocamento da página y é igual a zero, queremos definir o estado inicial como force Caso contrário, queremos definir o estado inicial como verdadeiro, o que simplesmente implica. Venha aqui. Agora, o aplicativo no deslocamento da página y é igual a zero. Você sabe por quê? É simplesmente porque não rolamos o aplicativo. Mas quando rodamos o aplicativo dessa forma, quando você erra. O aplicativo no deslocamento da página y será maior que zero Para isso, vamos definir o estado inicial como verdadeiro. Em um termo simples, quando você estraga o aplicativo, queremos apenas atualizar o estado. A razão para isso é poder dar ao cabeçalho um nome de classe para estilizá-lo de forma exclusiva quando o usuário estraga o aplicativo Você definitivamente entenderia a essência após a implementação Aqui vamos ter um efeito de uso. Qual o efeito do uso? Vamos ter uma alça de rolagem. Teremos uma rolagem constante Tp Q window dot page y offset Ou role o elemento do documento T. Finalize com a semiccoluna E aqui temos que atualizar o estado inicial. Coloque no rolo dois. A parte superior da rolagem é maior do que essa. E aqui vamos fazer window dot at event litener. Rolagem, rolagem com alça. Feito isso, a próxima linha é limpar a função removendo o pergaminho. Aqui, teremos um retorno. Ponto da janela, remova o ouvinte do evento. Rolagem com alça de rolagem. Vamos condicionar rapidamente o efeito de uso aplicando uma matriz de dependências vazia Depois disso, vamos fazer o log de pontos do console. Vamos registrar um sc. Quando você salva o aplicativo, eu comum para abrir o console. Quando eu estrago tudo. O aplicativo no offset da página y será creditado como zero. Em seguida, atualizaremos o estado inicial para verdadeiro. Mas quando eu escrevo, o aplicativo no deslocamento da página y será igual a zero e, em seguida, o estado atual será atualizado para Entendido. Linda. Então, vamos fazer isso mais uma vez. Estrague tudo. Confira no console. Para baixo. Com isso, poderemos estilizar o cabeçalho quando o usuário rola o aplicativo Feito isso, vamos começar a projetar os componentes do cabeçalho na próxima aula. Te vejo então. 35. Implementar pageYoffSet: Vamos aplicar rapidamente o exemplo. Então, vamos implementá-lo aqui. Vamos apagar o d porque não queremos adicionar nós extras à árvore. Temos que usar o fragmento de pontos de reação. Dentro do fragmento, teremos um cabeçalho. Agora vamos estilizar o cabeçalho. Dê a ele um nome de classe. Vamos fazer uso da interpolação de strings. Vamos abrir e fechar o suporte CO, dentro do suporte CO, especificar o diâmetro do saco Vamos dizer que, se o scrode for definido como true, faremos o header show e, caso contrário, nada acontecerá Linda. Sempre que você rola o aplicativo, queremos que o cabeçalho permaneça fixo na parte superior. Teremos a posição a ser corrigida. Do topo vai ser zero porque não queremos nenhum espaço entre o cabeçalho e o eixo Y. O índice z será 50. Faça a transição de tudo. Então, a duração aumentada será de 500. Agora vamos ter um estábulo. A cor do plano de fundo. especificar condicionalmente a cor de fundo Faremos isso se a rolagem estiver definida como verdadeira, o que significa que, se o usuário rolar o aplicativo, queremos que a cor de fundo seja branca. Caso contrário, não queremos nenhuma cor de fundo. Queremos que seja transparente. Separado com a companhia, limpe a coluna. Para a sombra da caixa, também queremos especificar condicionalmente a sombra da caixa Se scrolle estiver configurado como verdadeiro, que significa que quando o usuário rola o aplicativo, teremos uma sombra de caixa azul em toda a cabeça E então, nada acontece. W no HTML interno, teremos apenas uma tag H one para trabalhos didáticos. Vou testar o cabeçalho. Está tudo bem. Salve no navegador, aqui está. Você pode ver? Agora, o cabeçalho não tem fundo. Mas quando o usuário estraga o aplicativo, a cor de fundo do cabeçalho fica branca e, em seguida, a sombra da caixa aparece. Quando você aperta, a sombra da caixa desaparece e a cor do fundo também desaparece Então, quando eu errar, você pode ver, observe isso aqui no canto superior esquerdo da tela. Você vê? Ok, deixe-me fazer alguma coisa. Vamos dar a isso um nome de classe e, em seguida, vou fazer o texto sete do Excel. Isso fará com que o texto fique muito grande e, em seguida, o exemplo será mais corrigível Quando eu rolar para cima, o aplicativo no deslocamento da página y será maior que zero e, em seguida, atualizará o estado inicial para verdadeiro Quando o estado inicial está sendo atualizado para verdadeiro, com base no verdadeiro s, temos que aplicar uma cor de fundo b de branco ao cabeçalho com uma sombra de caixa. Entendido, lindo. Agora, quando eu rolo para baixo, ele desaparece. Acima, o cabeçalho pela cor do fundo fica branco e a sombra da caixa fica azul. Tudo está funcionando perfeitamente, conforme o esperado. Na próxima palestra, começaremos a desenhar a cabeça. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 36. Links de navegação: Vamos prosseguir com a implementação dos links de navegação, diretamente na cabeça. Mas antes de prosseguirmos, temos que levar tudo ao normal. Venha aqui. Vamos limpar da cabeça uma etiqueta. Volte para a página para aplaudir. Temos que limpar as duplicatas. Salve no navegador. Linda. OK. Vamos voltar ao cabeçalho, e aqui vamos ter o suficiente, vamos dar um estilo a ele. Vamos torná-lo invisível. A visibilidade ficará oculta. Agora, em um dispositivo extra grande, vamos torná-lo visível. Também é um dispositivo extra grande, a largura máxima para o Excel. Isso dará a largura máxima de 56. Neste ponto de ruptura, teremos a largura de oito Rm. As margens esquerda e direita serão automáticas. Novamente, dentro do romance, teremos uma ou aquela lista. Vamos dar um estilo a isso. Vamos fazer com que ele seja exibido de forma flexível A fonte será co-black. Opa. O preto tem que estar em uma tampa como essa. Rolo de etiquetas flexível. A direção da flexão é rolagem. Temos que alinhar os itens ao centro. A altura será 24. Agora vamos ter a etiqueta LI. Vamos dar estilo a ele. Vamos agrupá-lo O texto será enviado para o Excel, que será mapeado para a altura da linha e o tamanho do formulário. Vamos ter uma posição relativa. A fonte vai ficar entediada. A margem direita. Vamos fazer com que seja 20. Salve no navegador, nada acontece. Agora, vamos começar a implementar os links. Aqui vamos ter uma etiqueta A. Então, vamos para casa. Agora, ao verificar o navegador, você verá a página inicial. Linda. H. Vamos dar um estilo a ele. Nome da classe. ter um pouco de script java no meio, então vamos usar a interpolação de força Agora, queremos aplicar o estilo do menu. Item do menu. Não se preocupe, eu vou te mostrar agora mesmo. Abra o explorador. Dentro do CSS global. Copiamos e colamos os fogões aqui. E aqui está o efeito do menu. Então, da esquerda, -0,75 M, do topo, o índice Z, altura com raio de borda, cores e o resto deles Se o índice um selecionado for igual a zero, teremos o teste preto, contrário, nada acontece. Agora, vamos aplicar o teste real. Sei que essa parte é bem complicada, mas depois da implementação, vou explicá-la de forma simples O valor da cor será 666 d47. Bom. A capa do grupo, quando você passa o mouse sobre ela, o texto vai virar blog Vamos especificar a referência do hipertexto. Esse é um ponteiro para o componente inicial. Ao clicar neste link, precisamos atualizar o índice selecionado. Devemos atualizá-lo para zero. Logo após o L, vamos fazer se eu selecionar o índice um é igual a zero, então vamos fazer alguma coisa. Vamos ter um período aqui. Vamos dar o efeito do menu de permanência. Transforme, a opacidade faz com que seja 100. Vamos girá-lo na direção negativa. Portanto, gire menos 12, então isso fará com que ele gire em direção ao ângulo Grupo. Também temos que girá-lo. S. Só temos que destacar a extensão. Copie, venha aqui e cole. Então, a diferença é que isso vai girar na direção positiva Você não precisa prefixá-lo com o sinal de menos. E acho que é a única coisa que temos que fazer. Vamos dar uma olhada no navegador. Agora, você pode ver? Está destacado. OK. Bom. O que precisamos fazer agora é destacar a tag LI e duplicá-la três vezes Ou você pode copiar e colar três vezes. Destaque das linhas 38 a 50. Vou duplicá-lo três vezes. Perfeito. Então essa é a primeira duplicata. Agora, aqui, se definido o índice selecionado, um é igual a um. Atualize-o para um, e isso nos levará à seção de portfólio. Serão dois. Dois. Quando esse link é clicado, queremos rolar suavemente até a seção Sobre mim Componente sobre mim. Por último, opa, pessoal, me desculpem por isso Olha, temos que mudar o HTML interno. Aqui eu vou fazer o portfólio. Aqui eu vou fazer sobre mim, ou você pode fazer sobre Lastly, aqui vão ser três. H. Três. Vamos mostrar um amigo. Salve o aplicativo. Confira no navegador. Linda. Você pode ver quando eu vou? Tudo bem, então eu não estou totalmente convencido com o resultado que temos. Porque se você observar com atenção, perceberá que os links estão todos destacados. Não queremos que seja assim. Então, vamos resolver isso nas próximas duas palestras. Te vejo então. 37. Menu de gaveta de navegação de cabeçalho: Bem-vindo de volta ao Clouds. Nesta seção do curso, vamos continuar desenhando o desenho diagonal. Abra o componente do cabeçalho. Role até o topo. Vamos limpar rapidamente o registro do console. Aqui vamos abrir constantemente a gaveta, configurá-la para uma função de seta Ganhe a função, a atualização está aberta. Vamos atualizá-lo para verdadeiro. Lembre-se de que na aula anterior, declaramos que a variável de estado está aberta e o estado inicial é falso Então, agora estamos atualizando o estado diretamente nessa função. Agradável. Vamos renderizar rapidamente a gaveta O que vou fazer primeiro é importá-lo na parte superior. Vamos importar a gaveta da barra de pontos, eles vão desenhar Então, dentro dos fragmentos, teremos uma div. Dê o nome da classe. Com certeza, queremos usar a interpolação de strings, para que possamos escrever algum script java no meio Gaveta de dragão para fazer. Se is open for definido como verdadeiro, teremos a classe is open, contrário, nada acontece. Vamos estilizar essa classe no futuro. Vamos fechar o D. Dentro do D, temos que renderizar a gaveta Feche-o com a etiqueta de fechamento automático. Agora o que vamos fazer é abrir, vai ser igual a está aberto. Em seguida, o conjunto é aberto. O set que vai ser definido está aberto. índice selecionado um, será igual a, índice selecionado um. Por fim, defina o índice selecionado um , será definido o índice selecionado um. Linda. Estamos enviando todas essas tampas como adereços para o componente da gaveta Agora, depois de fazer tudo isso, temos que receber esses adereços dentro do componente da gaveta Abra o explorador e depois o diagnodrad ou as cadeiras. Vamos gerar os componentes funcionais. Lá dentro, temos que desestruturar o que está aberto. O set Coma está aberto. Coma o índice selecionado um, defina o índice selecionado um. Não desestruturei tudo isso. Vamos voltar ao componente do cabeçalho. O que vamos fazer no componente do cabeçalho é exibir a gaveta Aqui, vamos ter um d, te dar um nome de classe. Teremos sua posição relativa. Dentro desse d, teremos outro d. O índice Z será 30. Vamos ter sua posição absoluta. Os carros serão ponteiros. A largura é 14. A altura também é 14. Em dispositivos grandes, a largura, vamos fazer com que seja 24. Coluna O G, H 24. A cor do bagrond, vamos ter nossa própria cor personalizada, vamos usar oito AF d E. Vamos fazer com que ela seja exibida de forma flexível, justifique o conteúdo para justifique Alinhe os itens ao centro e queremos que as bordas sejam arredondadas Arredondado d, B R, x l. Isso fará com que a borda inferior direita fique um pouco curvada. Aqui. Vamos fechar o d e, dentro do D. Antes de prosseguirmos, temos que implementar o clique. Ao clicar no dispositivo, queremos abrir a gaveta Deixe-me te mostrar rapidamente. Você pode ver? Aqui está? Então, agora vamos colocar o menu aqui e dar uma olhada nisso. Que diabos é isso? Isso será corrigido no futuro. Vamos continuar. Agora vamos ter um desenvolvedor. Dê um estilo ao desenvolvedor. Teremos sua posição relativa. A largura será sete, G dez. A altura será sete. G H, então. Vamos fazer com que ele exiba de forma flexível, ifique o conteúdo para Alinhe os itens ao centro. Feche o D. Dentro do D, temos que exibir a imagem, que é a imagem do menu. IMG SRC equ slash drawer dot PNG. A alternativa, vamos fazer um item de gaveta. Vamos dar o estilo, a largura, vamos especificar uma largura personalizada de 150 pixels. A altura será dez. Aproxime-se com a etiqueta de fechamento automático. Quando você salva e verifica o navegador, os anúncios, você consegue ver? Isso não é lindo? Quando você observa com atenção, você verá as coisas aqui, e elas estão realmente ocupando espaço e eu não gosto disso Este artigo. Não sei onde o temos, mas temos que procurá-lo. Acho que deveria estar dentro da gaveta diagonal. E aqui está, essa profunda sobrecarga. Agora vou apagar esse item dentro do HTML interno. Quando você salva o projeto. Linda. Agora estamos progredindo e eu gosto disso. Ao observar o link de navegação, você perceberá que a gaveta está cobrindo o link inicial Você pode ver que há um link no canto superior esquerdo da tela, o link inicial. Portanto, temos que alinhá-lo adequadamente para que a casa venha logo após a gaveta de navegação Então, precisamos de um espaço no meio. Vamos fazer isso na próxima palestra. 38. Desafio de link doméstico: Com base na observação da palestra anterior, percebemos que a gaveta de navegação está cobrindo a faixa inicial, e esse foi exatamente o problema que prometi revelar a vocês Eu não disse isso. Vamos consertá-lo rapidamente. De volta ao berço S, dentro da cabeça S, você tem que rolar até o topo, onde temos a cabeça na etiqueta, e aqui está. O que vamos fazer aqui é especificar uma largura de 100%, que é W. O equivalente real do CSS será a largura de 100%. E quando você passa o mouse sobre ele, dentro do intellisens, você o verá ali Salve no navegador, eles são esses. Você pode ver? Linda. Agora, quando você clica na casa, a casa fica destacada e o resto do link de navegação fica um pouco fraco Quando você clica no portfólio, ele fica destacado e a cor do teste será preta. O mesmo aqui, o mesmo aqui. Então o mesmo aqui. Tudo está funcionando perfeitamente, conforme o esperado. Algo que eu quero que façamos aqui é renderizar os múltiplos da página inicial Eu quero te mostrar uma coisa muito rapidamente. Abra a página s e, em seguida, vamos renderizar rapidamente o componente inicial várias vezes. Eu só quero fazer isso para que possamos obter um pergaminho. Agora poderemos navegar pelo site. Então, você observará que quando eu rolar para cima, você pode ver que o cabeçalho fica branco e a sombra da caixa fica azul. E aqui, tornando os links de navegação mais visíveis. Isso não é lindo? Eu adoro isso. Tudo bem. É responsivo em nossa plataforma. Você pode ver? No iPad. Linda. Tudo bem, pessoal, então é exatamente isso que vamos alcançar nesta palestra. Rapidamente, volte ao código VS. Limpe as várias renderizações e, em seguida, vamos renderizar apenas um componente inicial na tela Tudo bem, tudo bem. E isso mesmo. 39. Abra e feche o menu de navegação button: Na palestra anterior, implementamos o menu de navegação Mas quando você clica nele, nada acontece. Nesta palestra, prosseguiremos a implementação da funcionalidade de abertura e fechamento Ele usa o código VS. No topo, vamos importar. Use o roteador, com Use o nome do caminho. E isso vem do Next s Navigation. O roteador de uso é uma função, então temos que invocá-lo E então atribuiremos a ela uma variável. Consta a rota equ. Vamos fazer o mesmo com o nome do caminho de uso. Nome do caminho C é igual ao nome do caminho U. O nome do caminho de uso é um gancho do componente cliente que permite ler o nome do caminho do URL atual. Feito isso, vamos substituir esse d pelo fragmento de reação Dentro do fragmento, teremos um df, forneça o nome da classe para estilizá-la Vamos ter sua posição relativa. Dentro desse d, teremos outro df, dê a ele o nome da classe Agora, queremos usar a interpolação de strings para que possamos escrever alguma parte do script java no meio O índice z é o índice 50. Neste momento, vamos ter alguma condição. Se o nome do caminho for assim, que é o ponteiro para o componente inicial, vamos obtê-lo do topo de zero pixels, caso contrário, do topo será de 100 pixels Então, aqui vamos ter o custo ou ser apontado. Queremos que seja fixado na parte superior. O menu dentro da gaveta terá exatamente a mesma altura do menu dentro do componente de cabeçalho Está bem? Não se preocupe, você definitivamente entenderá a essência. Então vá para o componente do cabeçalho, role para baixo e vamos copiar tudo aqui. Começando pela altura. Venha aqui. E depois cole. Linda. Feche isso. Outra, dê o nome da classe, dentro do nome da classe, vamos estilizá-la Além disso, venha aqui. Vamos copiar esse mergulho porque será exatamente a mesma coisa. Vamos substituí-lo. Feche isso. Mais uma coisa que temos que fazer dentro deste df é vir aqui Queremos especificar o clique. Ao clicar neste df, queremos fechar o menu Vamos definir que está aberto à força. Aqui vamos fazer. Se estiver aberto, é verdade, queremos exibir o SVdic fechado Então, abra rapidamente o recurso de código dot MD. Destaque das linhas 192 2205. Copie, venha aqui e cole no meio. E s. Também temos que mostrar o ícone do menu. Destaque a cópia, venha aqui e cole no meio. Tudo o que temos para formatar o código. Quando você salva no navegador. Tudo bem. Nada acontece. Então, por enquanto, talvez você não consiga ver o efeito na tela. Deixe-me te mostrar uma coisa. Vamos mudar o BG para vermelho para que você entenda do que estamos falando. BG, vermelho, 500. Feito isso, vamos aplicar rapidamente as estrelas. Abra o desenho diagonal em CSS. Temos que estilizar que eles vão desenhar dentro da cabeça para aplaudir Copie, venha aqui, pontue, eles vão desenhar. A largura do sorteio será de 100%. A altura 100 altura da vista. A posição será fixada no topo. Transforme a origem, nós a queremos do canto superior direito. Transforme a tradução, -100%, -100%. Transação, queremos transformá-la em 0,5 segundos em uma. O Coso será um ponteiro. O índice z é 100. Agora, para a diagonal aberta, o céu. Se essa abertura for definida como verdadeira, também teremos que estilizar essa classe aqui Copie o desenho diagonal, venha aqui e cole. Ponto aberto. Tudo o que temos que fazer aqui é transformar, traduzir 00. Simples assim. Volte para o componente do cabeçalho, logo no topo, vamos fazer pot do dot slash, header slash Eles vão desenhar CSS de pontos. Ao salvar, agora você definitivamente verá algo bom na tela. Você pode ver? Ao clicar, você o fecha. Clique para abrir, você fecha. Agora, deixe-me explicar tudo linha por linha. Você perceberá que quando eu clicar nesse menu, a gaveta de navegação aparecerá do canto superior esquerdo da tela para a direita. Dê uma olhada. C. Então, quando ele aparecer, você verá o ícone x, que é o ícone de fechar. Agora, quando eu clicar no ícone de fechar, se você estiver vigilante o suficiente, você verá um ícone de menu Agora assista. Você vê? Há um ícone de menu que aparece antes desse outro menu. Deixe-me ampliar um pouco. Dê uma olhada. Você vê? Ele se apaga com um ícone de menu. Então foi exatamente isso que fizemos dentro da gaveta. Deixe-me te mostrar. Se sua abertura estiver definida como verdadeira, mostraremos o ícone de fechar, e aqui está, o ícone x. E se a abertura estiver configurada para forçar , ou seja, se você fechar a gaveta de navegação, exibiremos rapidamente esse ícone antes que ele feche Então dê uma olhada, observe com cuidado. Tudo bem. Bom. Feito isso, aqui no topo, projetamos o layout da gaveta Então a cor é vermelha, e aqui está. Ele tem exatamente o mesmo tamanho do componente principal. Você pode ver? Agora conseguimos iniciar o está aberto e fechado Na próxima palestra, começaremos a implementar os itens do menu Tudo bem, tudo bem. Mas uma coisa que devemos fazer aqui é mudar o BG para azul. Está bem? Na verdade, eu o usei em vermelho para trabalhos didáticos, então você tem que devolvê-lo a essa cor. Quando você salva no navegador. Agora, quando você clica, consegue ver? Tudo bem. Tudo está funcionando perfeitamente bem. Vamos passar para a próxima palestra, onde implementaremos os itens do menu Nos vemos na próxima palestra. 40. Links de navegação de gaveta de menu: Então, vamos continuar com o design do menu. Abra o desenho diagonal Gs. Tudo bem Role para baixo. Logo após esse d de fechamento, teremos um cabeçalho. Vamos estilizar rapidamente o cabeçalho. Dê o nome da classe, vamos usar uma interpolação forte A posição será corrigida. A largura será total, o que a tornará 100%. A transição será tudo. A duração, vamos fazer com que seja 500. O índice z é 40, lindo. Tendo feito isso, vamos ter uma condição aqui. Se o nome do caminho for igual a isso. Vamos fazer isso do zero. Então, vamos colocá-lo de cima em -98 pixels, ou você pode torná-lo 100, se quiser Ok. Então, dentro da cabeça, vamos ter uma diferença, dar o nome da classe, vamos ter a posição relativa Outro df com o nome da classe. Aqui vamos ter a posição do índice z, vamos posicioná-la absoluta. Transforme a GPU. Vamos fazer com que entre e saia. A duração é 500. Transição é tudo. Escala, queremos escalá-la 100. Traduza x, nenhum. Vamos destacar isso. Copie, venha aqui. Colar. Isso será traduzido como Y. Vamos dar opacidade, O chão do bar dois, dois, 3740. Vamos fechá-lo. Ainda estamos estilizando isso. Ainda não terminamos com o estilo. opacidade BG, que é a opacidade de fundo, será 95 A largura é de 100%, vamos fazer com que ela flexione a coluna. Então, em dispositivos menores teremos seu rolo flexível Nós terminamos com isso. Agora , dentro dessa dose, vamos ter coragem. O teste dentro do nervo será branco. As fontes, queremos usar o quadro de cores. Teste o alinhamento c. T para Excel Vamos fazer com que se transforme mais tarde. Tudo bem Bom. Feito isso, teremos o UL. Ganhe o UL. Vamos rapidamente dar um estilo a ele. Nome da classe, display flex. A direção da flexão é a coluna. Ganhe a UL, teremos uma etiqueta LI. Vamos dar o nome da classe para estilizá-la. Vamos agrupá-lo. Movendo a parte superior e inferior. Serão quatro, A Excel, teremos o acasalamento superior e inferior em quatro Isso será mapeado para a margem superior e margem inferior no ponto de quebra de 15 36 pixels. Feito isso, ao salvar no navegador, clique no menu. Tudo bem Está chegando. Você pode ver que a gaveta está realmente chegando, mas vamos tentar finalizá-la para ver se temos problemas Dentro da tag LI, teremos um d, forneça o nome da classe. Teremos um bloco embutido de exibição A posição é relativa. Estamos no D, vamos ter a etiqueta A. Estamos fazendo muita coisa aqui no cabeçalho. H REF, a referência de hipertexto. Nós vamos fazer Slash Home. Então, quando você clicar neste, ele o levará ao componente inicial. Especifique o clique. Clique, vamos definir o índice selecionado de um como zero, simplesmente porque esse é o valor padrão para a casa. E espero que você entenda o que estamos fazendo aqui na aula anterior, onde declaramos as variáveis de estado a serem usadas Portanto, quando definir o Índice 1 selecionado como zero, significa que estamos na página inicial. Você entende, não se preocupe, enquanto continuamos arrasando, você definitivamente entenderá tudo Aqui vamos definir que está aberto à força. Porque quando você clica no link, devemos conseguir fechar o menu. Então, vamos configurá-lo para forçar. Vamos fechar a etiqueta A. O HTML interno, vamos mostrar em casa. Ao verificar o navegador, clique em, você pode ver, ele vem. Quando você clica nele, ele o leva ao componente inicial e a gaveta de navegação desaparece Essa é exatamente a ideia. Depois de fazer tudo isso, queremos que ele seja destacado ao ser clicado Fora da tag A, teremos um script Java. Se o índice um selecionado for igual a zero, queremos dar a ele algum estilo. Agora vamos ter um d, dê o nome da classe. Vamos ter sua posição absoluta. Do topo, serão dois da esquerda, serão menos dois Sempre que você me ver prefixando a classe de concessionária de vento traseiro com um sinal de menos, você deve entender que queremos especificar um À esquerda, dois. Vai ficar para a esquerda, menos dois. A largura será total, que a torna 100%. A altura também estará cheia, o que a torna 100% de altura. Transforme a GPU. A transição dura toda a duração. Vamos fazer com que sejam 300. Vamos rotacioná-lo menos seis menos rotaciona seis. A opacidade 100. O grupo dv gira seis. Grupo dv. A opacidade Hva será 100. Desculpe, no fundo, vamos chamá-lo de Excel porque queremos que as bordas O índice z, vamos ter menos dez. Ok, vamos salvá-lo e ver o que acontece. Opa, antes de economizarmos, temos que fechar o d assim A data de encerramento não deveria estar aqui. Corte-o e depois vamos fechá-lo aqui. Ls ls, ls, nada acontece. Certifique-se de fechar o subsolo aqui. Em seguida, destaque esse d novamente, C P. Venha aqui. Opa. Além disso, temos que fechar a parte inferior d. Em seguida, colá-la aqui. Agora vamos fazer algumas mudanças. R: Isso vai ser. Gire zero, a opacidade será zero. E o que é de novo? Eu acho que isso é tudo. Quando você salva no navegador, quando clica, quando eu passo o mouse sobre o menu, dê uma olhada Ele vai destacar o vermelho, e esse vermelho está sendo girado. Entendido. Linda. Agora, vamos mudar para a cor real. Acho que a cor real será azul claro, então temos que copiá-la daqui. A cópia do céu. Onde temos a cor? Ok. Aqui está. Comande D para seleção múltipla. Limpe-o nas duas linhas e depois cole. Salve no navegador. Novamente, quando você for, dê uma olhada. Eu adoro isso. Vamos destacar a tag LI e depois duplicá-la três vezes, assim como fizemos quando estávamos implementando os links no componente principal na opção Shift ten odds e, em seguida, toque na tecla de seta para baixo para duplicar as duplicatas um, dois e Linda. Quando você salva no navegador, agora você tem isso assim. Mas eu tenho dúvidas em meu coração. Esse cara aqui deveria cobrir a tela, que é esse menu aqui, e eu não sei por que não está aparecendo assim. Ok. Você pode ver? Parece bom. Agora vamos começar a fazer algumas mudanças. Essa é a primeira tag LI da página inicial. Para este aqui, vamos atualizar o índice selecionado definido para um, e eu defino que o índice selecionado é igual a um, então temos que fazer isso. E aqui vai estar o portfólio. Isso nos vinculará ao componente do portfólio. A segunda etiqueta LI N C. Para a terceira etiqueta LI. Vamos atualizar o conjunto selecionado do índice dois. Se, então, for igual a dois, queremos passar para o componente Sobre mim. E, a propósito, também temos que mudar o árbitro. Então, aqui, eu vou fazer sobre o componente. Role para cima. Aqui, temos que mudar os dois. Portfólio. E esse é o último. Então, vamos atualizá-lo para três. Se for igual a três, então temos que passar para os componentes iami Aqui, vamos especificar um M, diretamente na unidade. O que é de novo? Temos que conferir isso muito bem. Tudo bem? Ok, está tudo bem. Se perdermos algo no futuro, definitivamente podemos consertá-lo. Quando você salva no navegador, abra e pronto. Agora, quando você passa o mouse, você vê coisas assim. Você pode ver? Então, na próxima palestra, implementaremos os ícones de mídia social 41. Desafio da gaveta de navegação (corrigindo a altura): Portanto, o desenho diagonal está na metade da tela e não estou feliz com o resultado final Com certeza, há um problema com a altura. Então, eu quero que você aceite isso como um desafio, publique o vídeo e tente, tanto quanto possível, corrigi-lo do seu lado. Ainda não tentei resolver o problema do seu lado. Rapidamente, deixe-me mostrar como eu também consertei isso. Volte para o código VS. Vença o Dragono, sorteio do s, aqui está o cabeçalho. Temos que especificar a altura desse t. Então, temos a direção de flexão como coluna A coisa certa a fazer é fazer com que a exibição seja flexível e, em seguida, a direção da flexão seja Feito isso, também temos que fazer a tela HD da. Isso mapeará a altura para 100 alturas de visualização. Ao salvar, confira no navegador. Agora você pode ver, tudo está bem alinhado. Quando eu for, dê uma olhada. Parece bom e eu gosto. Fechar. Abra, feche. Então, basicamente, o problema foi corrigido e tudo está funcionando perfeitamente conforme o esperado. Na palestra, começaremos a implementar o ícone de mídia social logo abaixo do Nav, que é o Vamos implementá-lo aqui. Vamos fazer isso na palestra de Dine. 42. Ícones de mídia social da gaveta de navegação: Tudo bem, então vamos começar a implementar os ícones de mídia social. Ganhe um diagrama para desenhar, logo após o nervo de fechamento Nós vamos ter uma seção. Vamos dar a ela um nome de classe. A margem superior e a margem inferior serão 14 dispositivos menores. A margem superior e a margem inferior serão 12. Tudo bem, então em dispositivos menores, teremos sua posição absoluta. Em O G, vamos tê-lo relativo. Novamente, em um dispositivo menor, da direita será zero. A altura aumentará antes de prosseguirmos até a altura, também implementada em dispositivos grandes Espero que você possa ver claramente. Tudo bem. No dispositivo Small, a altura será a altura total, o que o tornará 100%. Na LG, a altura será automática. Tudo bem. Então, dentro da seção, teremos uma tag H. Vamos dar o nome da classe. Vamos ter um bloco de exibição. Em um dispositivo menor, queremos que ele fique oculto. Em um dispositivo menor, queremos que ele não exiba nenhum. Agora G, vamos ter um bloco de exibição, o bode da fonte O teste, temos que especificar um teste personalizado. Teste o dash para o Excel. Então, teremos que transformar letras maiúsculas. A margem inferior será cinco. Dentro do HTML interno, vamos me seguir. Assim mesmo. Ao salvar, confira o navegador. Abra a gaveta. Opa. Vamos ver uma coisa. Deixe-me economizar novamente. Carregar. Tudo bem. Aqui está. Linda. A próxima linha é exibir o ícone de mídia social. Dentro da seção, teremos um D. Vamos dar o estilo. Vamos ter uma tela flexível. Direção flexível, será o rolo. Em dispositivos menores, a direção de flexão será coluna Dispositivo grande, queremos que ele role de forma flexível. Dentro do D, teremos um rebocador A. Dentro do rebocador A, vamos dar um árbitro. Aqui, você precisa especificar seu identificador do Twitter. O link, e eu acabei de colar o meu. Bom. Dê a você o nome da turma. O teste ficará cinza e, em seguida, teremos que especificar o valor para torná-lo mais espesso. Ao passar o mouse, queremos alterar o teste para. Texto branco. Transição, cor e, em seguida, a duração. Vamos fazer com que sejam 300. A próxima linha é copiar e colar o SVG do Twitter. Agora volte para o recurso de código MD. Aqui está o SVG do Twitter. Copie das linhas dois, 27, 2238. Destaque e copie. Volte para o código. Dentro do HTML interno da tag A, basta colar. Ao salvar, vamos formatar o código para obter o recuo adequado Tudo bem. Tudo bem. Salve e confira o navegador. Você pode ver, agora temos o ícone do Twitter. Uma coisa que estou observando é que não há muito espaço entre a tag H e o ícone Vamos ver uma coisa. Tudo bem. É aqui que o místico está. Na verdade, é um erro tipográfico. Vai ser B, que é o fundo do Magin. Está bem? Ao salvar no navegador, agora dê uma olhada. Você pode ver? Linda. Estou adorando cada pedacinho das partituras. E espero que você escreva um comentário maravilhoso para realmente apreciar meu trabalho manual. Obrigado por isso. Portanto, o melhor na fila é destacar a etiqueta A e duplicá-la quantas vezes quiser Vou duplicá-lo três vezes. Acho que é o suficiente. Tudo bem. É bom. Mais uma vez. E quando você salvar no navegador, dê uma olhada. Parece bom. Então, o que vou fazer agora é alterar ícones e a referência do hipotexto Sim. Para mim, eu fiz isso do meu lado. Portanto, você deve copiar bem o UR do seu perfil e colá-lo diretamente no Hage reve Agora, o segundo Hage reve, vamos ter o git. Eu só vou fazer aqui git. Esse não é o URL do meu perfil do Git. Você pode fazer o seu do seu lado. Abra sua conta git, acesse seu perfil, copie a URL cole-a no HRF Feito isso, temos que mudar o SVG porque esse é um SVG do Twitter Volte para o recurso de código. Agora, aqui está o git. Copie os gits assim. Confira nas linhas 242, dois, 254. Copie, volte e cole aqui. Formate rapidamente o código. Além disso, vamos ter esse para o Dribble. Copie a URL da sua conta do Dribble e cole-a nela. O que vou fazer é mudar o SVG e então você pode fazer o resto do seu lado Limpe-o, volte para o recurso de código, destaque e copie. Ok, cole aqui. Uma forma de garantir a formatação. E, a propósito, você pode segurar a tecla shift e t e depois tocar na tecla F para formatar. Esse é o atalho para formatar com predia. E aqui, vamos entrar. Além disso, copie sua conta do Link Den e cole aqui, o link. Vou apenas especificar Link Dn. Exclua o SVG. Volte para o recurso de código e, em seguida, vamos copiar o SVG para o Link D. Destaque e copie. Venha aqui, cole, segure a tecla shift e d, pressione a tecla FG no teclado para formatar Também aqui, temos tudo isso que você pode fazer do seu lado, mesmo sem assistir à palestra Aqui, eu vou fazer o Instagram. Copie sua conta do Instagram. Para isso, basta copiar minha própria conta do Instagram. Limpe-o, cole o URL da sua conta do Instagram. Isso é meu e, a propósito, você pode me seguir no Instagram. Então, também temos que mudar o SVG para o Instagram. Assim mesmo. Desloque um ímpar e pressione a tecla F para formatar Agora vamos conferir o resultado final. Você consegue ver algo extremamente bonito? No iPad, ele está alinhado à direita. Em seguida, em um dispositivo móvel, dê uma olhada. Funciona perfeitamente bem, exatamente o que esperávamos. Isso é responsivo em todas as plataformas, e eu gosto disso. Assim, você pode clicar para abrir meu identificador do Instagram e depois não se esqueça de me acompanhar. Tudo bem. Portanto, tudo está funcionando perfeitamente, conforme o esperado. Nos vemos na próxima palestra. 43. Layout de tela de portfólio e exibição de itens: Vamos voltar para a aula. Nesta seção do curso, prosseguiremos com o design dos componentes do portfólio. Basicamente, o que vamos fazer nesta palestra é configurar o layout do plano de fundo. Onde depois eu fizer isso. Vamos começar. Abra rapidamente o explorador e, em seguida, o SRC, temos que implementá-lo nas páginas s. Antes de prosseguirmos, temos que fazer a entrada necessária em relação à fonte Abra o componente, a casa e depois as casas. Temos que copiar das linhas cinco para as linhas dez. Destaque e copie, feche, volte para a página, que é a página principal. Comum B para fechar o explorador. E então temos que colá-lo aqui. Linda. O ninho e a linha devem especificar a altura aqui. Vamos rapidamente dar a ela um nome de classe. Cara, tela. Vamos ter sua posição relativa. A altura mínima será de 100 v. Feito isso, abaixo da renderização do componente inicial, vamos configurar o layout do portfólio. Agora vamos ter um desenvolvedor. Dê a ela um nome de classe e, dentro do nome da classe, temos que aplicar estilos a ela. O topo da margem deve ser zero. Em seguida, os cinco primeiros do Padin, a margem inferior, teremos -40 menos a margem inferior Feche o desenvolvedor. Além disso, temos que especificar o ID do d. Eu vou vir aqui. Vamos fazer ID, equa, portfolio Portanto, é preciso ser preciso aqui. Abra o explorador. Volte para o cabeçalho, ponto G. Então, temos que procurar tudo bem. Aqui está. É extremamente correto. Portanto, certifique-se de que corresponda ao que temos aqui, porque quando esse link é clicado, queremos abrir esses componentes Linda. Tudo o que eu falo é demais. Feche o cabeçalho, feche o explorador. E agora vamos continuar. Feito isso, também temos que dar esse estilo DV. Queremos usar algum estilo embutido aqui. A imagem de fundo, gradiente linear, vamos girá-la em -62 Coma, e a cor será azul claro. Vamos ter EF sete F B. Vamos ter zero, 50%. E essa parcela vai ocupar zero, 50%. Se o coma e a outra porção forem brancos, ocuparão de zero a 100%. Você também pode recalculá-lo no final e torná-lo mais bonito em termos de divisão da tela Coloque um coma aqui e depois vamos descer. Separe-o com a vírgula. Venha aqui, a menos que seja especificada a largura. A largura será de 100%. Ao salvar, verifique se o aplicativo está em execução e, em seguida, confira o navegador. Por enquanto, talvez você não veja nada na tela. Vamos exibir rapidamente alguns itens para torná-los visíveis. Isso não seria D? Temos que formatar rapidamente o código. Logo dentro do d, teremos outro D, dê a ele um nome de classe. Então, temos que torná-lo responsivo em nossa plataforma, contêiner Então, o motor será automático. Dentro desse df, teremos uma tag P, e o hetermal interno da tag P será portfólio Queremos que esse portfólio fique em segundo plano. Salvar. Agora, aqui está o portfólio. Vamos dar uma estrela. Nome da classe, onde está no nome da classe. Nós vamos fazer o teste. Vamos fazer com que seja de 300 pix porque queremos que seja grande Por enquanto, você pode ver o portfólio aqui, agora mesmo. Agora, dê 300 pix ao voltar para o navegador, e então você verá bonito Agora, quero que você observe cuidadosamente a tela do portfólio. Você perceberá que está dividido em duas partes. A primeira parte é branca e a borda direita da porção é azul claro. Então, queremos que esse portfólio seja colocado somente nesta parte, a parte branca Então, o que vamos fazer é fazer com que o excesso fique oculto e, em seguida, aplicaremos mais estilos a ele Mas, por enquanto, basta observar que a tela está dividida em duas partes, e aqui está a implementação. Esse cara aqui. Aqui. Linda. OK. Vamos continuar. No teste, teremos um teste de cores personalizado, F seven FB, bacalhau Em dispositivos médios, o padrão restante será de 50 pixels. Caso contrário, teremos o paddn esquerdo e direito A largura máxima, temos até 2750 pixels. A largura 100%. Em seguida, transborde. Vamos fazer com que bata. Quando você salva, agora o portfólio aqui vai ocupar a primeira parte da tela. Dê uma olhada e aqui está. Tudo bem. Agora vamos ter um estilo. Vamos fazer com que ele transforme, traduza, zero pix, -20 Agora, depois da tag p, vamos ter outro d. Vamos ter exatamente o mesmo estilo com isso, então eu só tenho que destacar policial. Venha aqui. Por favor, dê uma olhada e cole dentro do D. Dentro do HTML interno do d, teremos uma tag P. Dê a você o nome da turma. O teste, vamos fazer um teste azul. Para A, FDE, em dispositivos médios , serão oito pixels Caso contrário, o preenchimento à esquerda e preenchimento à direita. Serão cinco. Na frente, queremos que seja um corpo extra, dentro das duas pontas, e então temos que selecionar um corpo extra O texto cinco Excel. Ganhe o HTML interno da tag P, vamos fazer trabalhos recentes. Salvar. Vamos dar uma olhada. Tudo bem. Linda. Agora temos o trabalho recente. OK. Eu já estou percebendo algo, mas eu vou te dizer quando terminarmos Após a tag P de encerramento do trabalho recente, teremos outra tag P. Vamos dar a estrela. Queremos fazer uso da interpolação de strings. A largura máxima, vamos chegar ao Excel. Em dispositivos medianos, o perdão foi embora. Vamos manter 80 pixels. Pressione para a esquerda e para a direita, vamos manter cinco. O teste será em pixels do sistema. A cor de teste para sete, c26d. Em seguida, altura da linha, vamos fazer isso, margem superior, et cinco. Agora, vamos atribuir a ele o telefone, para que possamos usar o Google Hind Eu vou fazer o nome da classe em hind dot. Perfeito. Dentro do H T ML interno da tag P, vamos copiar e colar algo lá. Abra o trabalho finalizado. Eu só tenho que destacar isso. Clique e copie. Você pode escrever qualquer coisa que descreva sua empresa ou a si mesmo. Eu só tenho que colar aqui. Vamos formar como código, salve. E aqui está. Tudo está funcionando bem, mas temos que resolver alguns problemas. O portfólio também está sobreposto, o teste está Vamos dar uma olhada no trabalho finalizado. Veja no trabalho finalizado, tudo está dentro da primeira parte. Além disso, o portfólio é usado como plano de fundo para o restante do item, e você pode vê-lo c. O que fazemos agora? Volte para o código. É muito fácil fazer isso. Quando você rola até o topo, para a direita não faria isso. Vamos fazer isso com 250 pixels menores para que ele possa empurrar o item para cima Agora, quando você salva no navegador, olha, está tudo bem alinhado. Eu amo isso. Linda. Mais uma coisa que quero chamar sua atenção é que os itens na borda esquerda da tela estão no contêiner de crescimento. A maneira de corrigir isso é fazer com que esse contêiner seja maior do que o contêiner na extremidade direita da tela Espero que você possa observar e ver do que estou falando. Venha aqui. Vamos ver onde dividimos a tela. Aqui mesmo. Agora, vamos fazer com que seja 45%. Quando você salva no navegador, tudo fica bem alinhado e esse é exatamente o resultado esperado Agora terminamos de configurar o layout. Na próxima palestra, prosseguiremos com a implementação dos cartões deslizantes Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 44. Cartão de portfólio: Vamos continuar exibindo os itens na tela. Voltar ao código VS. A primeira coisa que vamos fazer aqui é importar os dados. Minimize o código do VS, arraste-o para a borda direita da tela e abra os recursos do portfólio. Dentro dos recursos do portfólio, você verá a fonte de dados, abrirá a fonte de dados e aqui estão os dados. Volte para o código VS. Comum B para abrir o explorador. Agora, arraste e solte os dados diretamente no diretório do aplicativo. Linda. Agora maximize o código ias. Isso inclui os dados que vamos usar no cartão deslizante É apenas uma matriz de objetos. Dentro do objeto, temos o título, nome, a descrição e as imagens. Além disso, o segundo elemento, temos exatamente a mesma coisa. E assim por diante e assim por diante. Vamos renderizar rapidamente todos esses itens na tela. Abra os componentes. Clique com o botão direito no cartão deslizante. Aqui em Novo arquivo. Meu ponto deslizante, G é Outro, clique com o botão direito do mouse em Novo arquivo. Ponto do cartão deslizante gs. Gere o componente funcional diretamente nos arquivos. Feche o explorador. Vamos continuar com meu controle deslizante GS. Para que os itens sejam exibidos na tela. Primeiro, temos que importá-lo dentro desse componente. Importe a matriz de dados dos dados de barra do aplicativo. Obviamente, os dados S estão diretamente no diretório do aplicativo. Tendo feito isso, venha aqui. Limpe-o. Nós, no D, vamos mapear os dados. Agora vamos fazer o mapa de pontos da matriz de dados. Vamos usar um índice de coluna de itens. Este item aqui representa cada elemento na matriz. Deixe-me mostrar o título, o nome, a descrição, as imagens e assim por diante. Sempre que quisermos recuperar o título, faremos o título do ponto do item, o nome do ponto do item, a descrição e assim por diante Você pode alterar o nome do item para o que quiser, mas certifique-se de dar a ele um nome descritivo que descreva a intenção Aqui, vamos configurá-lo para uma função de seta, abrir e fechar porcentagens Vamos devolver a interface do usuário. Vamos ter um d com o nome da classe do controle deslizante M. Ganhe meu controle deslizante, vamos renderizar o cartão deslizante, que é esse cara aqui Então vá até o topo. Agora temos que importar o controle deslizante do cartão deslizante com barra de pontos. Então, simplificando, vou usar o controle deslizante. Aproxime-se com a etiqueta de fechamento automático. E agora vamos passar o item e o índice como adereços para o cartão deslizante Então, eu vou fazer item equ item. E então indexe equ index. Então, estamos passando esses adereços para o cartão deslizante . Que notícia? Vamos continuar recebendo os adereços diretamente no controle deslizante Deslize um corte e, em seguida, temos que desestruturar o item, um índice Acho que devemos usar um fragmento de cabelo. Destaque, limpe-o e eu vou fazer o fragmento de pontos de reação W nos fragmentos, vamos ter um D, dê o nome da classe A altura será de 200 pixels. É uma altura personalizada. Em um dispositivo grande, a altura será de 450 pixels. Em um dispositivo médio, a altura será de 400 pixels. Em um dispositivo menor, seu aparelho, a altura será de 200 pixels Em um dispositivo grande, a largura será de 650 pixels. Em um dispositivo médio, a largura será de 450 pixels. Vamos fazer com que seja de 300 pixels. Vamos ter uma posição relativa. A margem será alta, fechada para o surdo. Ganhe o dv, teremos outro df. Dê a ele um nome de classe. A altura estará cheia, que a torna 100%. A largura total. Vamos dar a ele um grupo. Então vamos fazer Coso all scroll. O índice z é uma posição de 50 ácidos relativa. Fechamos o d e, dentro do D, teremos uma tag de mensagens instantâneas, S R C equ Agora, lembre-se de que recebemos os adereços aqui, e esse item representa cada elemento dentro do R A. H, e aqui, mapeamos a matriz de dados e, em seguida, passamos o item Lembre-se de que neste item, um índice foi enviado para o componente deslizante como sondas Então, aqui embaixo, para acessar as imagens, vou fazer imagens de pontos de itens. E aqui estão as imagens. Então, queremos obter a primeira imagem dentro da matriz. H. Eu falo demais. Para acessar o primeiro elemento em uma matriz. Claro, você sabe disso. Você só precisa usar o índice de matriz zero. Feche com a etiqueta self close in. Quando você mesmo. Vamos ver o que temos no navegador. Nada é exibido na tela. Você sabe por quê? Deixe-me te mostrar. Abra o explorador. A página que Jz não vai rolar para baixo? Após o fechamento do dif, deixe-me mostrar que esse dif era o nome da classe do contêiner Nós vamos ter outro dif. Dê a ele um nome de classe. Por enquanto, não vamos aplicar estilo. Aqui, vamos renderizar meu controle deslizante. Feche-a da tag de fechamento automático e certifique-se de importá-la na parte superior. Salve no navegador. Eles são esses. Você pode ver? Agora, conseguimos exibir as imagens. Parece bom. Mas temos que dimensioná-lo adequadamente. Vamos estilizá-lo para que fique bem. O t vai ser. A largura será de 100%. A altura será de 200 pixels, mas em um dispositivo grande. Vamos fazer com que seja de 50 pixels. Em um dispositivo médio, vamos fazer com que seja de 300 pixels. A largura máxima 100%. Você pode ver? Agora, as imagens têm exatamente o mesmo tamanho. Vamos fazer com que as bordas sejam um pouco arredondadas. Agora vou usar o traço arredondado G. Sf e o navegador. Dê uma olhada. Você pode ver? Agora as bordas estão todas arredondadas. Depois desse d, teremos outro d. Vamos ter essa posição absoluta. Do topo, 14 e dispositivos menores. Esquerda 12, da esquerda, LG arredondado. Também queremos que as fronteiras sejam arredondadas. Estamos criando a sobreposição do cartão, dê a ele a cor branca A altura será de 200 pixels. Então, em um dispositivo grande, a altura de 30 a 50 pixels em média, 300 pixels, a largura será Então, dentro do mergulho. Ok. Pouco antes de prosseguirmos, temos que colocar uma sombra em forma de caixa. Deixe-me te mostrar uma coisa. Agora vou fazer VG, red 500. Eu realmente quero que você veja o cartão se sobrepor. Você pode ver? Agora, vê que está bonito, sério? Parece bom. Essa é a sobreposição de cartas Com o fundo vermelho. Agora vamos mudar para branco. Então, para torná-lo visível, porque se estiver em branco, você pode não ver claramente. Você pode ver? Não é visível o suficiente. Então, o que precisamos fazer é aplicar a sombra da caixa nos cantos. Então, eu vou fazer Stale Box Shadow. 48 A do E. Queremos aplicar a sombra da caixa tanto da esquerda quanto da direita, de cima e de baixo. Menos dez pixels, dez pixels, 20 pixels, dez pixels. Vamos economizar e ver. Tudo bem Linda. Eu adoro isso. Parece bom, na verdade. Formate o código com predia. Onde neste d, vamos exibir o nome do item. Teremos outra div com o nome da classe. Teremos sua posição em relação à altura, sempre 200 pixels. Em um dispositivo grande, a altura será de 50 pixels. Em um dispositivo médio, a altura será de 300 pixels. Obviamente, essas são todas as minhas especificações, então você pode fazer suas próprias. 100%. Feche o D. Dentro do d, teremos uma tag p. Ganhe o hetemel interno da etiqueta P. Vamos fazer o nome do ponto do item. Deixe-me mostrar onde estão os dados. Aqui estão os nomes. Está bem? Salve no navegador. Opa. Tudo bem Então, na verdade, está aparecendo, mas está por trás da imagem. Então, o que vou fazer agora é dar estilo a ele. Temos que posicioná-lo de forma absoluta. E depois os três últimos. E quando você verifica o navegador, aqui está. Tudo bem Não gosto da forma aparece do lado esquerdo. Não há margem alguma. O que vou fazer agora é pela esquerda. Vamos até o fim. O teste, será O G, a fonte. Vamos fazer com que sejam 300. Ok. Tudo bem Tudo está bem alinhado agora, e eu estou adorando os resultados finais. Dê uma olhada. Isso não é lindo? Mais uma coisa que vamos fazer é exibir o ícone clicável Logo após a tag IMD, teremos um D, forneça o nome da classe Vamos ter sua posição absoluta. Na parte inferior, 270 pix, em um dispositivo grande. Então, na verdade, estamos tentando atingir todos os pontos de ruptura. Então, sim, ele vai aparecer no 44, um dispositivo médio. Aparecerão dois em um dispositivo menor. Ele vai aparecer 270 pixels. Mas algo que temos que fazer aqui é mudar isso para 100 pixels. Sim. Eu acho que isso é mais correto. Esquerda, seis, da esquerda, vai começar a partir de seis. Então queremos que seja arredondado, LG, transicção. A duração será de 300 Espero que você possa ver claramente. Opacidade A opacidade é zero. Vamos agrupá-lo em grupo. Só queremos que o ícone apareça quando passamos o mouse sobre a imagem Grupo. Agora, a opacidade será 100 Bg, o fundo, 47 c2cd. O custo, o Coso será o ponteiro. Vamos fazer com que ele seja exibido de forma flexível, alinhe os itens ao centro e justifique o conteúdo Cor de destaque da sombra. G para 76 a seis d. A largura do ícone será dez, a altura dez e o dispositivo médio, a largura 12. Novamente, em dispositivos médios, a altura será 12 e na LG, não estou falando da LG em termos de produto. Em vez disso, em um dispositivo grande. W 20, novamente no LG H 20. Tudo bem É muito complexo por aqui. Está bem? Então, vamos fechar o D. Beautiful. Você pode passar por isso mais uma vez. Se ficar tão estressante, você pode copiar e colar meu código Não é crime de jeito nenhum. Agora, vamos exibir o SVG. Volte para o recurso de código. Você verá I S V G para o controle deslizante do cartão. Vamos copiar esse SVG aqui. Volte para o casaco. Cole-o neste servidor. Vamos formatar o casaco. S no navegador. Tudo bem Agora, quando eu passo o mouse no navegador, você vê que eu sou. Você pode ver? Eu adoro isso assim. Você pode ver? Você pode ver, vamos dar uma sombra de caixa. Vá e estilize o d. Coloque o mouse aqui. Pressione a tecla enter, o estilo, a sombra da caixa. Será o mesmo com a sombra cortada com controle deslizante. Eu só tenho que vir aqui e depois colar. Salve no navegador. Agora nós temos isso. Estou adorando o resultado final. Dê uma olhada. Tudo bem Isso é lindo, fantástico. Acho que terminamos com esse componente e terminamos para sempre. Agora terminamos de exibir o cartão. Um ponto muito importante que quero destacar é o sistema de roteamento dinâmico Não queremos exibir esse ícone como design. Queremos que funcione. Portanto, é mais funcionalidade do que design. Quando eu clico nesse ícone, devemos ser capazes de passar esses itens para uma página de detalhes do portfólio. Quando eu clico nesse cara, o nome, as imagens e tudo relacionado a esse cara seriam passados para uma nova página. O mesmo que esse cara e o resto deles. A ideia é simples. Queremos receber uma postagem individual quando esse ícone é clicado. Vamos implementá-la em uma palestra na Internet, simplesmente porque eu gostaria de explicá-la em detalhes Veja a palestra na internet. Mantenha o foco. Eu sempre cuidarei. 45. Implementação de controle deslizante de cartão: Temos os itens alinhados em uma coluna. Mas ao conferir o projeto finalizado, você perceberá que os itens estão todos alinhados em uma linha Vamos implementar isso rapidamente com a ajuda do react slick Volte ao código FS C B para abrir o explorador. Cartões deslizantes, abram meus pontos deslizantes. Novamente, temos que copiar algumas entradas diretamente do componente doméstico, componente doméstico, componente doméstico Temos que copiar das linhas dois para quatro. Copie e cole aqui. O melhor na fila é implementar as configurações do controle deslizante. Não se preocupe, eu já o tenho preparado. Então, vamos extraí-lo rapidamente do recurso de código do MD. Aqui está. Você precisa destacar e copiar as linhas 340 2482 Copie, venha aqui e cole dentro do componente desta forma. Salve, temos que aplicá-lo. Então, vamos ter um loop consistente. O slide para mostrar será um, o slide para rolar será um. Essa é a velocidade. A flecha está prestes a cair porque não queremos que ela tenha uma seta para a esquerda ou para a direita. O modo central é verdadeiro. O preenchimento central é de 400 pixels. Os pontos estão definidos como verdadeiros. Queremos ter alguns pontos logo abaixo dos controles deslizantes da imagem Agora, aqui, queremos estilizá-lo em dispositivos móveis. No ponto de interrupção de 1.700, teremos o slide para mostrar que Slide to screw é um deles. Vamos fazer com que seja examinado continuamente. Os pontos estão definidos como verdadeiros. O preenchimento central é de 400 pixels. Então, nós o temos responsivo ao ponto de interrupção de 640. Nesse ponto de interrupção, o slide para mostrar é um, para rolar é um, infinito, o que significa que queremos que ele role continuamente. O ponto está configurado para forçar. O modo central é configurado para forçar e, em seguida, a divisão central é definida como zero Vamos aplicar essas configurações do controle deslizante aos itens. Agora temos que limpar esse d. Aqui, vamos fazer o controle deslizante Logo no controle deslizante, temos que distribuir as configurações Assim mesmo. Destaque e corte, e então temos que embrulhar no alto Linda. SF. Vamos dar uma olhada no navegador. Opa. Diz que o controle deslizante de nome é definido várias vezes. Vamos rolar até o topo e ver o que acontece. Temos um controle deslizante aqui e também temos um controle deslizante Portanto, há um conflito de nomes. Aperte a parte superior e vamos consertá-la. Vamos fazer com que seja um cartão deslizante a partir de um cartão deslizante. Também temos que aplicá-lo aqui. SF, e no navegador, eles são esses. Você pode ver? Está tão linda. Eu adoro isso. Agora, aqui estão os pontos. Você consegue ver os pontos logo na parte inferior? Então, vamos dar uma olhada em um dispositivo móvel. Em um dispositivo móvel. O slide a ser exibido é um, e o slide a ser rolado também é um. Agora desativamos os pontos na parte inferior. Você pode ver isso? Mas no iPad, o slide para mostrar é um, e o slide para rolar também é um. Não podemos mostrar dois slides. Você pode ver, nós só temos uma exibição, que é esse cara no centro. Tudo está funcionando perfeitamente bem. Opa, temos que limpar o console por desse erro irritante porque já corrigimos isso. Tudo bem Agora, se você observar com atenção, perceberá que o espaço entre a etiqueta P e o controle deslizante é muito grande Então, vamos empurrar o controle deslizante um pouco para cima. E aqui está outro desafio para você. Portanto, publique o vídeo do seu lado e tente corrigi-lo rapidamente. Tudo bem Então, deixe-me ajudá-lo. VS Code, abra os pontos da página. Aqui, dentro deste desenvolvimento onde renderizamos meu controle deslizante Vamos apagar o nome da classe. Role até o topo. Vamos copiar esse estilo daqui. Destaque a cópia. Ganhe esse D. Nós vamos colá-lo. Então você salva, a. Tudo bem, subiu um pouco. Então, aqui eu vou fazer 100. É mais como especificar que a margem superior seja de -100 pixels e isso empurrará o item Está ótimo, mas também queremos aumentá-lo. Vamos fazer 170 tortas. Menos 170 pixels. Lindo, e isso resolve o problema. Você pode ver? Estou adorando o descanso final. 46. Rota dinâmica: Olá. Bem-vindo de volta ao Claus. Nesta palestra. Prosseguiremos com a implementação da página de postagem única. Quando eu clico nesse item, devemos ser capazes de passar o item para uma nova página. Além disso, quando eu clico nesse cara, devemos ser capazes de passar cada um com precisão para uma nova página. Podemos chamá-la de página de detalhes do portfólio. É exatamente aqui que entra o roteamento dinâmico. Vamos implementá-lo rapidamente. Código VS, abra o explorador. Cartão deslizante, cartão deslizante. aqui, se você perceber, perceberá que não temos um clique. Mesmo quando você clica nesse cara, nada acontece. Você pode ver? Você só pode passar o mouse sobre ele e ele aparece. Mas quando você clica, nada acontece. Temos que implementar no clique D. D D aqui que está abrigando o SVG Por padrão, o Next Es é executado no lado do servidor. Para implementar a renderização com um clique, precisamos mudar da renderização do lado do servidor para a renderização do lado do cliente Scrot top, para ter um switch, vamos usar o cliente Além disso, faremos algumas contribuições. Vamos importar o roteador de uso da próxima barra de navegação O roteador de uso é uma função, então temos que invocá-lo Use um roteador. Atribua seu à variável. O custo do roteador é igual ao roteador. Vamos definir rapidamente o clique aqui no Steve. Vamos clicar no botão, configurá-lo para uma função de seta. Portanto, com a ajuda do roteador de uso, poderemos enviar o item para uma nova página. E a forma como fazemos isso é simples. Vou fazer pontos no roteador, empurrar, abrir e fechar a porcentagem, e então queremos usar a espessura da bolsa Queremos obter os itens pelo ID dinamicamente. Então, o que vou fazer é cortar, detalhes do portfólio, barra, o ID Lembre-se de que, na aula anterior, eu disse que estamos usando o índice como ID e o desestruturamos aqui como testes. Ensinando bem. Linda. Não fiz isso. Quando um usuário clica no DF que contém esse ícone. Em outras palavras, quando um usuário clica nesse ícone, queremos passar esse ID para uma nova página chamada portfólio Dt. Então, quando você salvar e conferir o navegador, vamos lá. Quando você clica, ele retorna um aviso de erro 404, que diz que a página não foi encontrada Uma coisa é configurar. Conseguimos obter o ID dinamicamente. Ao verificar a guia, você verá que o D desta postagem é zero, que é o índice da postagem. Entendido. Perfeito. Quando você voltar, vamos clicar nisso. Dê uma olhada. Na guia, você verá o ID. O ID é um. Agora vamos voltar ao código do VS para criar a página dinâmica. Comum B para abrir o Explorer. Vou copiar os detalhes do portfólio, que especificamos aqui como uma rota. Copie, clique com o botão direito no aplicativo, Nova pasta. Cole os detalhes do portfólio, ou seja, na entalhe Faça anotações. O que você tem aqui deve estar exatamente com o que você especificou como rota. Se você fizer o contrário , não vai funcionar. Opa, dê uma olhada. Tudo bem. Ganhe os detalhes do portfólio, agora vamos criar a própria rota dinâmica. Nova pasta. Para criar uma rota dinâmica, temos que colocá-la em um colchete. O que vamos pegar aqui é a identificação na tecla enter. Feito isso, precisamos criar uma página dentro do ID. Clique com o botão direito no ID, novo arquivo. Vou chamar essa página de ponto Gs. RFC para gerar o componente funcional. Vamos ter uma etiqueta Hage one para trabalhos didáticos. Vou fazer uma página dinâmica. Vamos dar ao Hage o nome de uma classe e ao teste sete Excel Confira o navegador. Quando eu clico, Opa, algo deu errado. Tudo bem. Oh, meu erro. Gente, temos que especificar a barra frontal assim. Acho que fizemos isso anteriormente. Ao recarregar o aplicativo, vamos clicar. Você pode ver? Agora temos uma página dinâmica. Vamos clicar nesse cara. Você pode ver? Temos a página dinâmica? Linda. Tudo está funcionando perfeitamente, conforme o esperado, e eu estou adorando o resto final. Esta é a página em que J Now conseguimos implementar nossa rota dinâmica. Na próxima palestra, vamos pegar a postagem e exibi-la na tela Acredite em mim, o resultado final vai te surpreender. Isso está desligado por enquanto. Nos vemos na próxima palestra. Mantenha o foco, A, cuide-se. 47. Obter o id em uma nova página (dinamicamente): Na palestra anterior. Conseguimos passar o ID de cada item para uma nova página Quando você clica em qualquer um dos itens aqui, passaremos dinamicamente o ID para uma nova página Ao observar a guia, você definitivamente a verá ali. Este item tem o ID de um. Lembre-se de que estamos usando o índice como ID. Nesta palestra, vamos pegar esse ID, e isso será feito com parâmetros Abra o código VS. Dentro do aplicativo, vamos criar uma nova pasta chamada page. Dentro da página, vamos criar outro diretório chamado portfolio Dt design. Dentro do portfólio Dt design, vamos criar rapidamente uma nova página Clique com o botão direito do mouse em novo arquivo e, em seguida, vamos chamá-lo de ponto de índice GS. Feito isso, feche a página. Agora, abra os detalhes do portfólio. Dentro da rota dinâmica, temos que abrir a página. Detalhes do portfólio, ID e página. Feche o explorador. O que precisamos fazer aqui é destacar e apagar os componentes funcionais básicos que geramos. Em seguida, vamos ter o portfólio const, configurá-lo para uma função de seta Vamos exportar rapidamente o portfólio padrão. Vamos importar o react do react. Temos que aceitar adereços. O melhor na fila é pegar o ID e os dados. Temos que importar o design detalhado do portfólio. Vamos importar rapidamente a matriz de dados. Feito. Aqui, vamos devolver a interface do usuário. Vamos usar fragmentos de pontos de reação. Enrole os fragmentos, vamos renderizar o design do portfólio. Design detalhado do portfólio. Feche com a etiqueta de fechamento automático. A linha de aninhamento deve passar os dados como adereços para o design do portfólio Dados iguais, matriz de dados, e aqui vamos fazer props dots Params Lembre-se de que usamos adereços aqui, linda. O ID é igual ao ID dos parâmetros de pontos. Por fim, matriz de dados igual, matriz de dados. Vamos consolar os parâmetros. ID dos parâmetros IP do log de pontos do console. Feito isso, no topo, vamos usar o cliente. Temos que mudar da renderização do lado do mar para a renderização do lado do cliente Vamos clicar para conferir o console. Então, quando você clica em um item, eu venho e abro o console. Então você verá que o ID do item é zero. Vamos torná-lo mais legível. Aqui eu vou fazer. O ID é qualquer que seja o ID. Salve e, aqui, eu quero clicar em um item diferente. Vamos clicar nesse cara. Abra o console e você verá que o ID é dois. Dois 48. Página de publicação única (design de detalhes de portfólio): Vamos continuar com o design do portfólio Dido. Vamos configurar rapidamente o layout do plano de fundo. Logo após o fechamento do df da posição absoluta. Aqui está. Vamos ter outro df, dê a ele um nome de classe W no nome da classe, vamos fazer com que ela exiba a grade, coluna do modelo de grade é 12. Vamos colocar sua posição em relação. O espaço para a esquerda e para a direita é zero. Em um dispositivo grande, espaço esquerdo e direito também é zero. Feche o d, dentro do d. Agora vamos dar a ele a estrela. O plano de fundo. Gradiente linear. Queremos ter seu RGBA de 90 graus 238, 247, 251 Queremos que essa parcela seja de 58% em 100. Em seguida, a outra parte RGB A dois, 255 2551. Queremos que ele ocupe 52% da tela. Esta é apenas minha especificação. Você pode fazer mais do seu lado. Agora, dentro da def, vamos ter outro de, dar a ele um nome de classe e, em seguida, a coluna span 12 Em um dispositivo grande, coluna, extensão oito, margem inferior. Queremos rolar. Em um dispositivo grande, dar tapinhas para a esquerda e partir para a direita é zero Em um dispositivo menor, dar tapinhas para a esquerda e partir para a direita também é zero Vamos fazer com que seja 20. Então, todos sabemos que cada postagem do portfólio tem várias imagens Vamos exibir rapidamente as imagens. Mapa de pontos de dados, imagens, pontos. Pegue um item. Vamos pegar um D, dar a ele um nome de classe. Vamos aplicar rapidamente a classe utilitária. Vamos ter uma tela flexível. Justifique o conteúdo para centralizar. Mas em um dispositivo grande, queremos justificar o conteúdo até o fim Vamos alinhar os itens ao centro. Feche o d. Não é Vamos ter a etiqueta IMD, S R C equ, item, que é esse cara aqui Feche com a etiqueta de fechamento sf. Quando você vê ventrical, o navegador, e aqui está. Você pode ver? Aqui estão todas as imagens que correspondem ao site da empresa de entrega de alimentos. Temos todas essas imagens dentro da área. Você pode conferir isso nos dados como. Agora, conseguimos exibir as imagens. Vamos aplicar estilos rapidamente a ele. Nas fotos do portfólio. A altura será automática. Vamos dar a ela um nome de classe. O topo da margem é 20. Queremos que as bordas das imagens sejam arredondadas. No navegador, aqui está. Você pode ver? Tudo parece muito bem. Uma coisa que não queremos aqui é que a primeira imagem seja um contêiner transbordando. Então, vamos controlá-lo aplicando a largura. A largura será de 800 se você salvar no navegador, e agora a temos. Linda. A próxima linha é implementar os itens à direita da tela. A propósito, quando você voltar para casa, se clicar em algum desses itens, vamos buscá-los dinamicamente Depois de divulgar o df. Nós vamos ter outro df. Agora eu quero ser um pouco rápido. Em um dispositivo grande, basta copiar isso e depois rastrear. Também em um dispositivo grande, queremos que o px seja zero. Dispositivo pequeno, também queremos que o P X seja zero. Obviamente, você deve conhecer o equivalente CSS do Px e do resto dos fogões Eu venho mostrando a todos vocês. Agora vamos ter outro dif, dê o nome dessa classe div A margem tb é dez, mas em um dispositivo menor, a margem tb é 24. A largura será a largura total. Na LG, teremos a largura máxima de 300 pixels. Também na LG, teremos a separação da extremidade esquerda à direita para ser uma O acolchoamento, a extremidade esquerda, perdão, a direita, será três. Então, vamos fazer com que fique grudento de cima para baixo. A parte inferior da divisória será 14. Então, isso terá sua posição fixa. Acho que essa é a única classe utilitária que eu não expliquei. E agora eu expliquei isso. Linda. Tendo feito isso. Vamos ter um hedge one tag. Ganhe o Hedge, exibiremos o nome do portfólio Então, o nome do projeto, por assim dizer. Eu vou fazer Data dot name. Vamos ver o que temos. Tudo bem. Aqui é a Yum Food Company A. Vamos dar rapidamente o estilo. Vamos acessar a classe utilitária do texto d three cel. A margem inferior é quatro, então, na cor do texto, queremos ser consistentes em nossas cores Então, vamos usar um azul claro. Por oito FDE. Se você notar, perceberá que temos sido consistentes com nossas cores, incluindo o tamanho da fonte e o resto delas. Isso ocorre simplesmente porque, ao criar um aplicativo profissional, precisamos ser consistentes com as fontes, a cor e o resto do design. Claro, esse é um ponto importante que você deve observar. Opa, dê uma olhada. Vamos fazer disso 20. No momento, nós o temos aqui. Vamos continuar. Ok pessoal, não há margem entre a imagem e o nome. Vamos continuar. Temos que corrigir isso no final. Não exibi o nome do projeto. Vamos continuar exibindo a descrição um e a descrição dois. Agora temos que usar uma tag p. Descrição dos pontos de dados. Aqui está. Vamos rapidamente dar um estilo a ele. O tamanho do teste será de 14 pixels. Vamos fazer uso do tamanho da fonte. O fundo da margem será quatro. Então, também precisamos ser consistentes na cor do teste. Dois, dois, 370. Tudo bem. Agora, nós fizemos isso. Outra etiqueta P. Coloque essa tag P, queremos exibir o ponto de dados, a descrição um. Vamos ver o que temos, e aqui está a descrição. Perfeito. Dê a ela o nome da classe e vamos aplicar a classe utilitária. Para as classes utilitárias, tudo será o mesmo. Então eu só tenho que destacar copiar, vir aqui e colar. Quando você salva, oh, lindo. Eu amo isso. Tudo bem. Feito isso, vamos exibir os céus logo após a etiqueta P. Vamos fazer com que um d dê o nome dessa classe D. Vamos fazer com que seja exibido flex e faremos com que seja Flex Rb. Uma etiqueta H one. Dê esse estilo rapidamente. Pessoal, antes de prosseguirmos com isso, acho que vamos ter um destaque entre as tags p. Logo após essa etiqueta P, teremos outra etiqueta P. Dê um ID à etiqueta P, saia, destaque. Vamos fazer descrições de projetos. Vamos ver aqui está. O que vou fazer agora, depois de fazer isso, dê um nome de classe. A margem superior e a margem inferior serão duas. O texto, vamos fazer com que seja escavado. 20 pixels, a fonte é seis. Tudo bem. Esse é exatamente o resort esperado. Vamos continuar com esse D. A margem direita será cinco. O texto, vamos fazer com que seja de 14 fotos. Estamos nos mantendo consistentes aqui. No chão do bar, teremos um azul bem claro. 65f1. Em um dispositivo grande, queremos alterar a cor do fundo da barra. Px dois, Py, um. Queremos que os cantos sejam arredondados, as fontes, a margem inferior. Nos textos, em um dispositivo grande, queremos alterar a cor do teste para 6a787 d. o termo H interno da tag H one, você exibirá sua Design UI x. Salve e veja o que temos no navegador. Tudo bem. Dê uma olhada. Parece muito bom. O que vou fazer agora é destacá-lo e duplicá-lo quantas vezes eu quiser Destaque a tag Hadron. Vou duplicar um, dois, três, quatro, cinco Seguro, lindo. Parece tão bom. Você pode mudar a balança. Próximo ponto s. Você pode reagir, e assim por diante. Tudo bem. Agora terminamos o design e tudo parece excelente. A próxima linha final é criar um espaço entre as descrições e a imagem. Vamos fazer essa correção na próxima atração. 49. Desafio de espaço de portfólio (Assignment): Na palestra anterior, tivemos um desafio com a imagem e a descrição Se você observar com atenção, perceberá que não há espaço entre elas. Então, eu quero que você publique o vídeo e tente, tanto quanto possível, corrigi-lo do seu lado. OK. Então, deixe-me mostrar como eu consertei isso. Aparafusado na parte superior, onde temos o pai de. Este é o código principal que contém todos os itens logo após o término do trabalho. Tudo aqui assim está dentro desse d. Se você observar o dv, perceberá que em um dispositivo grande especificamos a margem esquerda e direita como zero Vamos mudar para dois s no navegador. Agora temos um pequeno espaço no meio. Vamos continuar aumentando o valor. Vou torná-lo seguro. E, a propósito, essa é a especificação da mente. Você pode tentar outro valor no final. Você pode ver? Agora temos espaço no meio. E tudo está funcionando perfeitamente como esperado. Vamos dar uma olhada em um dispositivo móvel. Você pode ver? No dispositivo móvel, temos esse fundo azul. O plano de fundo do teste aqui que destaca a escala, e esse é exatamente o resultado esperado. Tudo bem, então tudo está funcionando perfeitamente bem. O melhor é implementar a próxima, a pré-visualização. Vamos fazer isso na próxima palestra. 50. Próximo e anterior Button: A. Bem-vindo de volta à aula. Nesta palestra. Vamos implementar a próxima funcionalidade e a anterior que, quando o usuário clicar no próximo bot a entrar, possamos abrir o próximo projeto dentro dos detalhes do portfólio A mesma coisa aplicável ao aparafusamento anterior. Deixe-me demonstrar isso rapidamente para que todos entendam bem o suficiente. Aqui está o projeto final. Quando eu rolar para baixo, você verá o anterior e o próximo aparafusamento. Eu quero que você observe com cuidado. Agora, se você observar com atenção, perceberá que, dentro do aparafusamento anterior, temos a imagem do portfólio No próximo aparafusamento, temos a imagem da entrega de alimentos. Você sabe o porquê. É simplesmente porque quando você clica no aparafusamento anterior, o projeto anterior a ser exibido é o portfólio, Axal o próximo projeto é a entrega de alimentos Deixe-me mostrar, quando eu clico em Avançar, você vê, agora aqui está o projeto de entrega de comida. Se você observar o próximo embarque, o site imobiliário é o próximo e o anterior é o site da Administração Hoteleira. Vamos implementá-lo dentro do código VS. Logo na parte superior, vamos importar o gancho de estado usado e o gancho de efeito de uso. Também precisamos importar o roteador usado. Na próxima barra, navegação. Vamos importar rapidamente a fonte do Google. Já fizemos isso antes. Agora só temos que copiar. Abra a página, role até o topo, copie das linhas quatro a nove. Feche e cole. Linda. Vamos declarar as variáveis de estado necessárias e o conjunto de funções. Dentro do componente. Vamos inicializar rapidamente o uso do roteador. É uma função, é claro, temos que invocá-la e depois atribuí-la a uma variável Custo do roteador equ use o roteador, declarando as variáveis de estado Em seguida, teremos a próxima corrida definida. Além disso, teremos que destacar e depois duplicá-lo Aqui, vamos ter o anterior e vamos definir o anterior. Simples assim. Dentro do efeito de uso, temos que implementar a funcionalidade. Se Js passar ponto, se Js estiver em ID de passagem ponto, dados iguais serão rad em comprimento Vamos digitar o código rapidamente e vou explicar melhor quando terminarmos. Aqui vamos definir próximo a zero. Caso contrário, vamos definir ao lado do Json dot paz ID mais um Depois de fazer isso para o próximo, vamos duplicá-lo rapidamente para o anterior Vamos substituir todas as ocorrências do conjunto seguinte ao conjunto anterior Comande D para destacar os dois e, em seguida aqui vamos definir o anterior, e vamos mudar para menos um porque, na verdade, estamos diminuindo Quando você clica em Avançar, você está incrementando. Mas quando você clica em anterior, você está meio que retrocedendo Sim, então é isso que é. Feito isso, vamos implementar os bodins e depois aplicar essa funcionalidade Logo após esse d de fechamento, teremos outro d. Dê a esse d um nome de classe. Vamos ter sua posição relativa. Faça com que ele seja exibido de forma flexível, com fundo colorido. A altura será 48. O texto, porque vamos exibir o texto em seu interior, a cor será branca. Dentro desse df, teremos outra div, dê a ela um nome de classe Agora vamos usar a interpolação de strings porque esperamos uma expressão java script A propósito, a parte traseira está localizada no canto superior esquerdo do teclado logo abaixo da tecla escape. A largura será 1/2, o que, no CSS real, será mapeada para 50%. Teremos uma tela flexível para alinhar itens ao centro, justificar o conteúdo ao centro justificar o conteúdo Capa BG. Então, queremos usar a fonte do Google ind dot, fechar o D. Novamente, o que temos que fazer é usar nossa estrela real. Claro, você deve saber o que queremos fazer agora. Queremos especificar a imagem de fundo. Vamos usar uma bolsa. URL. O raio de dados obteve imagens de pontos anteriores. E vamos pegar a primeira imagem diretamente na matriz de imagens. Salve e veja o que temos. Componentes, cartão deslizante, meu cartão deslizante. Você está falando sério? Opa, pessoal. Que diabos é isso? Limpe-o. Não precisamos disso aqui. E acho que vamos ficar bem agora. Vá, vá em frente. Opa. Novamente, vamos para a página tem. Oh, meu Deus. Eu cometi um erro lá, minha culpa, e me desculpe por isso. Cole aqui. H. Ok. Agora temos um erro, não é possível ler as propriedades da imagem de leitura indefinida Uma coisa que vamos fazer agora é, antes do ponto, aplicar uma marca de que, como essa, resolverá o problema. Dê uma olhada. Agora temos o anterior. Você definitivamente entenderá a essência. Vamos ter uma etiqueta A. Vamos estilizar rapidamente a etiqueta A. Temos um centro de conteúdo com justificação flexível de tela e, em seguida, a cor é a cor real que estamos usando O ponteiro mais próximo, transição, cor 3D, duração, Sky it 300 O chão do bar 405 b66. A opacidade BG, vamos torná-la 90. Centro de alinhamento de itens. A largura será total e, claro, você já deve saber o equivalente em CSS. E a altura será a altura total. Feito isso, vamos implementar rapidamente o botão com um clique. Dentro do HTML interno da tag A, vamos fazer um projeto anterior. Seguro, no navegador, e então você pega Feito isso, precisamos exibir o ícone anterior. Abra o recurso de código. Aqui está o ícone anterior. Destaque e faça com que seja copiado. Cole aqui. Formate o código para um recuo adequado. Definido no navegador, agora você entendeu. Linda. Agora, quando você clica nesse botão, nada acontece. Vamos implementar rapidamente o botão com um clique. E dentro da etiqueta A. Teremos o botão “on click”. Ao clicar neste botão. Vamos fazer a rota de um ponto. Empurrar. O que vamos empurrar? Pegue um carrapato e, em seguida, corte os detalhes do portfólio. Portanto, deve ser exatamente a mesma coisa aqui dentro do sistema de roteamento dinâmico. Detalhe do portfólio. Ok. Slash, anterior, salve as alterações Tudo bem Então, vamos tentar selecionar um item. L Vamos rolar para baixo rapidamente. Agora, quando você clica em anterior, ele nos leva ao projeto anterior. Você pode ver? Agora vamos implementá-lo para a próxima. Temos um pouco de ar aqui dentro do terminal. Ok, pessoal, vejam o que vamos fazer agora. Aparafuse na parte superior. Deixe-me te mostrar. Dez fazem. Nós vamos fazer algo assim. Salvar. Vamos ver. E o anterior exige que façamos isso pelo título. Vamos fazer isso aqui. Vamos fazer isso aqui. Vamos fazer isso em todos os lugares. Salvar. Vamos atacar novamente. Nome do dia 177. Esperanças bem datadas. Aqui está. Agora, o problema está resolvido. Ok. Agradável. Linda. Acho que também temos que implementar o próximo para que tudo fique equilibrado. Agora, o que vou fazer rapidamente é destacar esse de. Você vê essa tinta aqui. Isso termina aqui. Escreva nas linhas 138. Vamos copiar duas linhas um, 38. Destaque e copie, venha aqui e cole. Salve no navegador. Agora temos o anterior anterior. Vamos mudar rapidamente as propriedades. Primeiro, aqui será o próximo projeto. Save e C. Agora temos o próximo. Você pode ver que a seta está apontando para a esquerda, então vamos usar o propol SVG para o próximo W no recurso de código, copie o próximo SVG e, em seguida, limpe-o e cole Salve e formate o código para um recuo adequado. Quando você verifica o navegador, agora temos o próximo. Código. O que mais temos que fazer? Agora temos que chamar a imagem real para a próxima. O que eu vou fazer aqui é o próximo. Temos que atualizar a próxima aqui e depois chamar a imagem. Como estamos aqui, temos que empacotá-lo para o próximo projeto. Quando você salva e verifica o navegador. Vamos começar a seguir. Volte para casa. Agora, vamos começar do zero. Vamos clicar nesse cara. Anterior. Tudo bem Em seguida, lindo. Em seguida, lindo. Próximo. Tudo está funcionando perfeitamente bem. Está funcionando. Tudo bem, pessoal, então terminamos a próxima e a versão anterior. E espero que você ache esta palestra útil. Tudo bem Isso está desligado agora. Na próxima palestra, começaremos a implementar a seção Abt M. Nos vemos na próxima palestra. 51. Sobre o layout: Olá. Bem-vindo de volta à aula. Nesta palestra, vamos projetar os componentes do Aba M. Rapidamente, temos que fazer isso. Vamos começar. VSCode, abra o Explorer Componentes S RC, dentro do diretório Abad M, clique com o botão direito do mouse, crie um novo arquivo chamado Abat Mi Dot s. Gere o componente funcional. Feche o explorador. Vamos continuar com o design do layout. Como de costume, vamos fazer uso dos fragmentos. Fragmento de pontos do React. Ganhe os fragmentos, teremos um d. A cor de fundo será f3d Vamos dar a ele o top 250 pixels da patente. Dê a ele uma margem entre os dez primeiros. A parte inferior acolchoada de 100 pixels. Em um dispositivo grande, a parte inferior acolchoada. Vamos fazer com que seja de 600 pixels. Vamos ter sua posição relativa. Em um dispositivo grande, a altura será de 800 pixels Outro. Vamos tê-lo em um contêiner, e a margem será de. Isso fará com que qualquer coisa dentro desse t seja centralizada porque as margens esquerda e direita serão iguais Agora vamos ter uma etiqueta de hedge one. Dentro do HTML interno da tag Hage one, vamos fazer sobre mim. Vamos apagar isso. Além disso, vamos aplicar as classes utilitárias na tag Hage one O texto terá 240 pixels, o W 8%. Aquecimento por transbordamento. Posição absoluta. Em um dispositivo grande, da esquerda serão 40. Em um dispositivo médio, da esquerda serão 30. Na parte superior, teremos -50 pixels. A cor do texto e7fc. Bom. Confira no navegador. Tudo bem, nada acontece. Vamos renderizar rapidamente esses componentes dentro das páginas. Vá para fora do Steve. Em seguida, vamos falar sobre mim. E, por favor, certifique-se de importar esses componentes na parte superior. Foi importado automaticamente para mim. Tudo bem. Agora vamos voltar aqui, seguros no navegador. Vermelho. Tudo bem. E aqui está. Tudo bem, então, o plano de fundo não está aparecendo. É simplesmente porque espaçamos o colchete para criar um estilo personalizado Vamos fazer rapidamente o ajuste necessário dentro do colchete. E ele é isso. Linda. Depois do rebocador Hedge One, teremos outro Hedge one tug, e desta vez, vou fazer Vamos rapidamente dar a estrela a ele. Vamos colocar sua posição em relação. A fonte será um bloco reitor. Texto, cinco Excel. Novamente, a cor do texto, vamos permanecer consistentes com a cor do cabeçalho. Eu vou fazer 48 AF dE. Agora você entendeu. Margem inferior. Serão cinco, e também o topo da margem será -40 Em um dispositivo médio, o preenchimento para a esquerda e o preenchimento para a direita serão 24 E, vamos dar tapinhas para a esquerda e modelar para a direita para serem cinco no outro ponto de ruptura Vamos salvar e ver o que temos se o cabeçalho estiver feito corretamente , e aqui está. Linda. Tudo está alinhado corretamente. Tudo bem. Perfeito. Tudo bem, antes de prosseguirmos, vamos rapidamente dar uma identificação a esse ID. Está bem? ID, equ, salve o projeto, comande B para abrir o explorador, vá para o cabeçalho gz Vamos conferir o link para ver se a referência está realmente correta. Este é o Abt M, e aqui visamos o componente A. Eu aconselho que você deve destacar e C. Volte para Abt M e depois cole assim Salve, vamos ver se funciona. Agora eu clico em Sobre mim. Estrondo. Ele se move rolado até os componentes do Abat me. Portfólio, boom, Hm. Por fim, Hm. Agora vamos fazer isso de novo. Sobre mim e boom. Lindamente feito. Tudo bem. Vamos continuar. Feche o explorador. Agora você tem que escrever sobre si mesmo. Depois da tag Hage one, teremos uma tag H four Dentro. Vou apenas usar o Knack of pod em software com operação de front-end n e back-end Opa, dê uma olhada. Tudo bem. Salvar. Vamos dar uma olhada. Tudo bem. Vamos estilizar rapidamente o H de t. Vamos tê-lo relativo A largura será a largura total. A largura frontal será 300. Em um dispositivo médio, teremos a largura de 3/4, cujo equivalente em CSS é 70% Em um dispositivo grande, W 2/3. Em um dispositivo grande, a largura será 66,6%. Em um dispositivo extra grande, A frente será reitora. O texto. Vamos permanecer consistentes com o texto, dois, dois, três, 740 O tamanho da fonte e a altura da linha são dois Excel. Margem dez abaixo, perdão à esquerda e perdão à direita é cinco, em um dispositivo mediano O P x, que é o perdão à esquerda e perdão à direita, será 24 Vamos ver se está bem alinhado agora. H. Linda. Na verdade, estamos fazendo s. Vamos fazer outras paradas. Depois do calor, quatro puxões. Vamos formatar o código. Bom. Agora temos um recuo adequado Depois da etiqueta heat four, teremos uma seção. Dentro da seção, teremos uma tag p. Antes de prosseguirmos com a tag P, vamos dar a ela a estrela. Vamos ter sua posição relativa. Vamos fazer com que ele seja exibido de forma flexível. A direção da flexão é cólon. Em um dispositivo grande, a direção flexível será rolada Separar para a esquerda e para a direita é cinco. Em um dispositivo médio. Claro, o que deve permanecer consistente. Separando para a esquerda e para a direita serão 24. OK. Bom. Dentro da tag P, eu só tenho que escrever paradas sobre mim. Então, copiei e colei a gravação na tag P. Você deve saber exatamente qual é o direito da cabeça para descrever sua capacidade. Feito isso, quando você verifica o navegador, eles são esses. Então, o que vamos fazer é dividir a tela em três partes diferentes em um dispositivo grande. W na etiqueta P. Vamos dar o nome da classe. Vamos usar a string na tapulação por causa da dica do Google A largura total. Vamos fazer isso rapidamente em um dispositivo grande. Em um dispositivo, teremos a largura de 1/3. Agora, essa é a primeira parte. Está ocupando uma parte de toda a seção. Entendido, lindo. O teste, a cor do teste, é claro, vamos permanecer consistentes. Eu só tenho que pegá-lo daqui. D pronto. Aqui está. Colar. A margem direita será zero. A margem inferior é cinco. Em um dispositivo grande, a margem direita será quatro. Não gosto do jeito que a fonte é, queremos deixá-la um pouco fraca Sim. Vá rapidamente para a página para s, que é a página principal. Vamos copiar rapidamente os pods. Role até o topo e cole. Novamente, vamos pegar essa das linhas sete a dez. Em seguida, cole aqui. Role para baixo. Agora vamos aplicar a fonte. Nome da classe Ind dot. Salve no navegador. Vamos dar uma olhada. Isso parece tão bonito. Eu adoro isso. Tudo bem. Mas estou percebendo algo que não está em forma. Não se preocupe, com certeza resolveremos o problema quando terminarmos. E é exatamente assim que eu quero que a palestra termine. Ok, tudo bem. Destaca rapidamente a tag P, duplique-a duas vezes SF, esse é exatamente o resultado esperado. E eu adoro isso. Você pode alterar a redação aqui e aqui. Agora vou postar a palestra e depois voltar ao meu portfólio, copiar e colar Todo esse direito a um cabelo descreve um seis. No final, faça de tudo para se descrever adequadamente. Perfeito. Agora, a próxima linha é implementar os cliques do item Acho que devemos fazer isso na próxima palestra. Mas antes de prosseguirmos para a próxima palestra, você vê isso sobre meu histórico Eu quero empurrá-lo um pouco para o topo. Quero deixar isso como um desafio para cada um de nós. a palestra rapidamente e tente , tanto quanto possível, corrigi-la Esse desafio é muito importante porque abrirá nossos olhos para os erros comuns que cometemos ao usar t wind CSS. Agora publique a palestra e resolva você mesmo. Tudo bem. Deixe-me resolver isso com você. Volte para o código VS. Role até o topo, onde temos a cerca de uma etiqueta do Aba me. Agora, quando você chegar a este lugar, perceberá que, do topo, queremos que comece com -50 pixels Mas agora há algo errado. Onde temos o topo, não o implementamos com o traço Você precisa sufixar a classe utilitária de vento traseiro com traço para fazê-la funcionar Aqui está. Você pode ver, agora está no topo. Linda. Tudo bem, portfólio sobre minha casa. Então me diga, não parece bom? Claro que sim. Isso está desligado por enquanto. Nos vemos na próxima palestra. 52. Sobre a lógica de componente: Lá voltamos para a aula. Nesta palestra, iremos configurar as variáveis de estado necessárias e definir as funções a serem usadas Vamos fazer isso rapidamente. Código VS na parte superior. Vamos importar o gancho estadual. Ganchos não são permitidos nos componentes do servidor. Portanto, temos que mudar para os componentes dos clientes. Vamos importar rapidamente os dados. Um dado de uma barra de dados. E dentro dos componentes. Const está invertido, o conjunto é invertido. E afirma que o estado inicial será f. Basta destacar a duplicação três vezes Aqui, vamos deixar que esteja desbotado. Em seguida, esse conjunto é reduzido para quatro. Este será um índice seletor. C Defina o índice do seletor. Por favor, certifique-se de mudar esse cara para o cabeçalho Definir índice seletor Vamos defini-lo como zero. OK. Dados do mapa. Vamos configurá-lo para definir os dados do mapa. O estado inicial será sobre dados. Teremos o primeiro item nos dados, que serve como estado inicial. Tudo bem. Tendo feito isso. Vamos colocar tudo isso junto em uma função. Agora vamos ter minhas funções const, configuradas para funcionar, dentro de nós vamos absorver o. OK. Conjunto invertido Vamos manter isso como falso. Satisfeito. Outono. Defina os dados do mapa, vamos configurá-los como dados. Tudo bem. Vamos clicar na alça do cartão. Const. Controle o clique do cartão. E aqui, vamos pegar dados , índice Vamos dar um formato rápido. Essa função atualizará o estado inicial para um novo estado. Vamos definir como verdadeiro. O conjunto está desbotado para verdadeiro. Defina o índice selecionado como índice. Nós vamos fazer coisas aqui. Defina o tempo limite. Minhas funções e, em seguida, a transmissão de dados , e nós os queremos. Basicamente, o que estamos tentando fazer é que, quando você clica no cartão, ele desapareça Vai levar algum tempo para aparecer e passar para outro cartão. Não se preocupe. Novamente, quando começarmos a implementá-lo, você definitivamente entenderá a essência. Confie em mim. Você definitivamente entenderá a essência. Feito isso, implementaremos a próxima função e a anterior. C e próximo. Defina-o para uma função R. Agora vamos ter uma declaração e aqui, que diz que, se o índice selecionado for menor que cinco, chamaremos a função handle click. Ganhe a função, obteremos os dados e, em seguida, selecionaremos o índice mais um. Vamos obter os dados e depois incrementar em um. Novamente, índice selecionado mais um. Setas, clique no carrinho de controle. Sobre dados. Vamos manter o primeiro item. Se o botão não for clicado, manteremos o primeiro item Vamos manter tudo como padrão. Tudo bem. Eu falo demais. Agora, vamos implementar o identificador anterior. Só precisa destacar e depois duplicá-lo. Você também pode copiar e colar. Lidar com o anterior. Se o índice selecionado não for igual a zero, chamaremos a função handle click, acessaremos os dados contidos nela e, em seguida, diminuiremos em um Simples assim, senão, vamos manter o quinto item, assim mesmo. Ok, tudo bem. Agora terminamos de configurar a lógica, não se preocupe. Na próxima palestra. Quando começarmos a consumir essa lógica, você definitivamente obterá o clast Isso é válido por enquanto. S na próxima palestra. Mantenha o foco e sempre tome cuidado. 53. Implementação de grid button: Agora terminamos de implementar a lógica. Vamos aplicá-lo rapidamente à interface do usuário. Role para baixo. A primeira coisa que vamos fazer aqui é criar o layout do plano de fundo. Claro, temos feito isso durante todas as palestras O que vou fazer agora é copiar e colar rapidamente . Cole aqui. Feche o d. Temos apenas o fundo, um gradiente linear Estamos apenas especificando o layout de uma cabeça. Em um dispositivo grande, definimos a margem superior como -60. Dentro desse d, teremos uma seção. Vamos aplicar as classes utilitárias. Vamos configurá-lo para um contêiner. Vamos fazer com que ele seja exibido de forma flexível, a direção da flexão é a coluna, o traço da margem é Então, em um dispositivo menor, vamos flexioná-lo A direção da flexão será rolar. O preenchimento da esquerda para a direita é cinco. Em um dispositivo médio, o preenchimento para a esquerda e para a direita é 24 A banheira de margem, vamos fazer com que seja de 50 pixels. Em um dispositivo menor, o limite de margem será zero. Vamos fazer com que se transforme. Traduza Y, fazendo com que seja -100 pixels. Nesta seção, teremos outro D, forneça o nome da classe. Em seguida, vamos colocá-lo em um dispositivo menor, vamos fazer com que ele seja exibido de forma flexível Com vai estar cheio. Novamente, em um dispositivo menor, a largura será de 50% 1/2. Em um dispositivo grande, a largura, vamos fazer com que seja 7/12. Como. Feche isso. Agora, nas profundezas, vamos mapear os dados e exibi-los na tela. Mas antes de prosseguirmos, quero te mostrar uma coisa. Role até o topo. Aqui, onde analisamos o índice e os dados. Anteriormente, eu gostava disso, o que não está certo. Você deve saber que isso será um índice. Linda. Só um pequeno erro tipográfico E acho que todo mundo comete erros. E, a propósito, eu não sou um robô. Tudo bem. Agora vamos fazer um mapa de pontos de dados. Por favor, eu quero que você preste atenção aqui. Estamos mapeando os dados. Vamos considerar o primeiro parâmetro, que representa cada elemento dentro da matriz ou dentro dos dados. Em seguida, o segundo parâmetro é o índice, que serve como ID. Agora, fora dos parênteses, teremos uma função de seta Desta vez, vamos retornar a interface do usuário. Por esse motivo, temos que usar os parênteses, e não o colchete co F W entre parênteses, agora vamos escrever a interface do usuário Primeiro, vamos ter uma etiqueta A. Vamos especificar o clique dessa tag A. A propósito, sempre que você quiser especificar o clique, você definitivamente precisa alternar da renderização do lado do servidor para a renderização do lado do cliente Vá até o topo e, em seguida, aqui está. Se você não fez isso do seu lado, deixe-me limpá-lo para maior clareza. Eu só vou usar o cliente. Simples assim. OK. Vamos continuar. R dentro. Vamos invocar o clique no cartão identificador Ocorreu-me que também há um erro na grafia do clique da alça Então, é exatamente assim que se escreve. Se o seu não for assim, não será registrado. Então aperte aqui, vai ser um clique na alça do cartão. Publique o vídeo, faça as correções necessárias, vamos continuar. Controle o clique do cartão. Em seguida, vamos incluir no item um índice. Vamos dar um estilo a ele. A caixa Shadow 48 e DE. É preciso permanecer consistente. Vamos ter menos cinco pixels, ou nos quatro cantos do cartão, vamos aplicar a sombra da caixa Dez pixels, 20 pixels, zero pixels. Um dos lados não terá a sombra da caixa. Legal. Agora, vamos dar a ela um nome de classe. Dentro do nome da classe, temos que fazer isso dentro do marcador traseiro. A posição será relativa. O mais próximo será um ponteiro, uma transação, tudo. Então vamos fazer com que ele se transforme. A duração será de 300. Então, vamos cortar isso. As bordas desta carta serão arredondadas. Então, esta carta vai servir como base. Não se preocupe, você terá uma visão geral quando terminarmos as implementações. Não há nada com que se preocupar. A propósito, você sempre pode fazer perguntas quantas vezes quiser. E eu estarei lá para responder imediatamente. Excel arredondado. Vamos colocá-lo no centro, o acolchoamento, vamos fazer com que seja seis Em um dispositivo grande, o preenchimento, vamos fazer com que seja dez. Vamos fazer com que ele exiba flexibilidade, direção flexível é a coluna, justifique o conteúdo para centralizar e, em seguida, alinhe os itens no centro, e isso é tudo para Na tag A, dê a ela um nome de classe. Então esse d vai servir como o contêiner da imagem. Vamos dar a largura com d 16, altura 16. Em seguida, um dispositivo menor, dez de largura. Também altura dez. Em um dispositivo maior, a largura será 16. Novamente, em um dispositivo maior, a altura será 16. Linda. Vamos ter um IMG para exibir a imagem, S RC, e aqui, esse item aqui que representa cada elemento na matriz Então, vamos fazer item dot. Portanto, sempre que quisermos acessar os itens que temos na matriz, usaremos esse parâmetro. Ponto do item, IMG. Aproxime-se com a etiqueta de fechamento automático. Deixe-me te mostrar rapidamente. Aqui temos os dados gs. Ao ler, você verá os dados sobre. Portanto, temos as contagens, o título, o IMG e as matrizes de informações E todos os stups estão dentro do objeto de matriz, ok? E nós o temos em seis lugares. Então, quando você faz o ponto do item, conta, você terá a contagem de um. Título do ponto do item, faça IMG ou R A, e assim por diante Então, vamos fechá-lo rapidamente, fechar o Explorer. Ao salvar, vamos ver se ele aparece no navegador. Parece bom, mas esse não é o resultado esperado. Tudo bem? As imagens estão bem no D. Acho que expliquei isso mais cedo. O item está em um rolo. Não é assim que queremos que os itens sejam. Vamos fazer algo assim. Vamos ter um d, dê o nome da classe. Vamos ter uma grade de exibição, em um dispositivo menor, grão C até um extra grande, grão três. A diferença é de seis margens à direita, zero. Em um dispositivo grande, a margem direita será dez. Feche o d. Agora, dentro desse d, deixe-me mostrar para você. Copie do suporte co de abertura para o suporte co de fechamento Você só precisa pressionar a marca de opção e tocar na tecla de seta para movê-la dentro do Steve. Ou você também pode destacar, recortar e colar no Steve. Salve e veja o que temos. Agora tudo está alinhado conforme o esperado. Linda. Mas agora, quando você passa o mouse sobre os botões, você pode ver que nada acontece Mesmo quando você clica, nada acontece. Você pode ver? Então, vamos implementar o on hover. E então, quando o usuário clica no botão, queremos que a bunda seja destacada Também precisamos exibir o título dentro do botão. Está bem? Volte para o código FS. Após o fechamento D que serve como contêiner IMG, teremos uma tag H four. Vença o H four. Vamos fazer o título do ponto do item. Salve e veja o que temos. Agora temos os títulos exibidos, mas não estão bem alinhados Vamos alinhá-lo rapidamente. Agora, dê a ele um nome de classe. Vamos usar a interpolação de strings porque esperamos que o script Java esteja Vamos fazer com que ele teste, alinhe, ao centro. Mas em um dispositivo menor, o tamanho da fonte e a altura da linha são 0,8 RM. Em um dispositivo maior, o teste Excel. A fonte, a placa do reitor. O B deve estar em Cp. Cores de transição, duração 500. O que é, novamente, nós temos que fazer? Grupo, vamos agrupá-lo, passe o mouse. Texto, branco. Quando passamos o mouse na parte inferior, o texto muda para branco Caso contrário, a cor do texto, vamos manter a cor que estamos usando F sete, 626d, margem superior é três Tudo bem. Então, agora vamos ter as condições. Vamos fazer assim. Se o índice selecionado for igual ao índice, queremos mostrar o texto em branco. Texto branco, caso contrário, nada acontece, salve e veja se está funcionando. Você pode ver, quando eu passo o mouse, o texto se transforma Mais uma coisa que vamos fazer é exibir a contagem. Quando passamos o mouse sobre esse cara, queremos exibir a contagem desse item diretamente na matriz Se aparecer como número um, número dois, três, então temos que fazer isso. Logo após a tag H four, teremos um di, forneça o nome da classe. Novamente, vamos usar a gravata. Vamos ter sua posição absoluta. Da direita, vamos ter menos dois, e do topo, vamos ter menos Vamos fazer com que ele se transforme. A transição será tudo. Duração, 500. A opacidade é zero. Vamos fechar rapidamente as profundezas para que o erro da mina possa ocorrer. Agrupe, passe o mouse, vamos implementar o hover. Quando você passar o mouse sobre ele, a opacidade será 100. Lembre-se de que definimos a opacidade padrão como zero. Ao passar o mouse sobre o cartão, você define a opacidade para 100 e, em seguida, o item será exibido na tela Simples assim. A sombra de exibição do Excel. A largura será 12, a altura 12. Os cantos serão arredondados. O plano de fundo. Para trabalhos didáticos, usaremos um plano de fundo aleatório. B, traço verde, 500. Não se preocupe, vou usar o plano de fundo original. Vamos ter uma tela flexível. Justifique o conteúdo para centralizar o alinhamento dos itens no centro. O que mais temos que fazer novamente? As fontes, vamos fazer com que sejam um barco. Font d bot. Texto de brancos. E a fonte, lembre-se que está na tabela. Além disso, o texto X é bom. Vencendo o d, temos que exibir a contagem, ponto do item, a contagem, simples assim. Salve e veja o que temos. Quando eu passar o mouse sobre o cartão, a contagem será exibida no canto superior direito do cartão Dê uma olhada. Então esse é o número um na matriz, dois, três, quatro, cinco, seis, e espero que você pegue o queijo O que mais podemos fazer agora? Queremos que apareça de uma forma muito agradável. Vamos girá-lo mais ou menos. Agora, o que eu vou fazer. Às vezes, a melhor explicação que você pode dar é a implementação. Então, deixe-me implementar o que tenho em mente para que você entenda. Se selecionado, índice igual ao índice. A opacidade será 100 e não zero. Então vamos girá-lo em 12 graus. Então, vamos girá-lo um pouco, e então, o que acontece? Grupo, gire 12. Vamos dar uma olhada rapidamente. Você pode ver? Observe que quando eu passo o mouse sobre as pontas, a contagem de cortes fica inclinada para a direita Isso é resultado da classe de utilidade rotativa que implementamos Feito isso, queremos destacar a bunda quando clicada Vamos fazer isso rapidamente. Role até o topo, onde temos a etiqueta A. D D. Aqui está o nome da classe da tag A. Ganhe o batik. Agora vamos examinar alguns scripts java. Se o índice selecionado for igual a um índice, nós o manteremos destacado, o que significa simplesmente que, se um usuário clicar no botão Se um usuário clicar na tag A, por assim dizer, queremos que ela seja destacada. Para fazer isso, basta especificar a cor. BG. Vamos usar vermelho, 500. Quando você economiza, temos que implementar a casa antes que ela funcione. Bom. Salvar. Você pode ver? Tudo funciona. Bom. Agora, outra coisa importante que precisamos implementar é que, quando passamos o mouse sobre os itens, queremos mudar a cor E, a propósito, o vermelho é apenas para trabalhos didáticos. Não se preocupe, teremos tudo resolvido. OK. Mesmo que queiramos especificar a cor, também queremos uma animação agradável. OK. Animação muito fácil. Menos traduz Y. Y menos dois. É assim que podemos prefixá-lo se você quiser aplicar um valor negativo Em Ha, a cor de fundo, vamos torná-la azul. A sombra va, vai ser o Excel. Então, vamos fazer com que ele traduza y menos dois. Eu só tenho que destacar e copiar esse cara, regá-lo dentro da casa. O que é de novo? A cor. Vamos torná-lo branco. BG Branco. OK. Agora vamos economizar. Formate rapidamente o código para obter os recuos adequados. Salve e confira o navegador, esses. Clique. Você pode ver? Quando você passa o mouse sobre ela, a cor muda e, quando você clica, ela fica destacada Tudo bem, tão lindo. E eu quero que você observe a animação. Você pode ver? Dê uma olhada. Eu amo isso. Agora, temos que usar a cor certa. Para o fundo whoa, usaremos uma cor personalizada, destacaremos, apagaremos, abriremos e fecharemos o colchete e, dentro do colchete, temos essa e, dentro do colchete, temos O mesmo se aplica a Eles destacados assim com exatamente a mesma cor. Além disso, acho que temos que mudar outra coisa aqui na contagem. Certo. Vamos dar a mesma cor de fundo para a contagem. OK. Linda. Tudo legal. Tudo bem, pessoal. Você vê? Parece bom. Você pode ver? Dê uma olhada. Ok, eu adoro isso assim. Por enquanto, isso está desativado e, na próxima palestra, implementaremos o show card. Te vejo então. 54. Exibição de cartão de habilidade: Na aula anterior, exibimos a imagem e o título, diretamente dentro da tag A, que estamos usando como bumbum Quando você o usa, ele está funcionando perfeitamente conforme o esperado. Nesta palestra, mostraremos os dados relacionados a cada título Por exemplo, quando clico no desenvolvedor de front-end, queremos exibir os dados relacionados ao front-end, que é a escala. Além disso, quando clico no back-end, devemos ser capazes de exibir os dois ou dados relacionados ao back-end, por assim dizer Deixe-me mostrar rapidamente o que está nos dados. Aqui dentro dos dados s, temos os dados sobre aqui, e dentro, temos um objeto dentro do objeto, contamos até ser um, o título, que é I x, a imagem. O que fizemos na palestra anterior, exibimos o título e a imagem Aqui. Nesta palestra, quando você clica no botão, queremos exibir todos os fogões A mesma coisa aplicável ao resto do objeto a ser colocado na matriz. Quando você clica no back-end, queremos buscar os dados relacionados ao back-end, que são o nó S, Mongo DB e o resto deles A matriz de nomes aqui pode ser alterada. Você pode renomeá-lo para itens ou qualquer nome que você ache que descreva sua intenção Passe para o componente sobre mim. Depois desse d, deixe-me mostrar esse df aqui. Esse é o d de fechamento. Quando estiver nesse d, teremos outro dif, forneça o nome da classe A largura será total, o que a torna 100% de largura. Em um dispositivo pequeno, a largura será 1/2, o que a torna 50%. Em um dispositivo grande, a largura será 5/12 Excesso de fluxo visível. Colocando à esquerda e à direita, o hash zero. Em um dispositivo pequeno, a parte e a esquerda serão seis em dispositivos grandes. Colocando a esquerda e a direita, serão dez. Feche o df e, dentro dessa definição, teremos outro Vamos dar a ela o nome da classe. O fundo será branco. Então, queremos que todos os quatro cantos sejam arredondados. despedida é dez. Em um dispositivo extra grande, a separação é 14 Sotaque de sombra, cor. Temos sua posição relativa e, dentro do desenvolvimento, teremos uma seção. Feche isso. Vamos aplicar rapidamente o estilo à seção. Dê a ele um nome de classe. Agora, queremos usar a interpolação de strings. Ganhe o bati, vamos atribuir a ele nome de classe de pés à esquerda Anote o nome dessa classe. Vamos estilizá-lo no futuro. Transborde, vamos aquecê-lo para que não cresça fora do recipiente Agora vamos ter um script Java dentro. Vamos fazer se for faded é igual a verdadeiro, então vamos atribuir o nome da classe Fad out, caso contrário, nenhum nome de classe será Ganhe o D, teremos uma etiqueta p que servirá como etiqueta. Eu vou fazer meu texto es A. Então vamos ter o céu do texto abaixo. Mas antes disso, vamos salvar e conferir no navegador. Bom. Aqui está. Meus céus de texto são, quaisquer que sejam suas dicas de texto quando você clica em qualquer um desses painéis Para o cartão, deixe-me te mostrar. Aqui está o D. Com o fundo branco e arredondado do Excel, que faz com que todos os cantos desse dv sejam arredondados Espero que você possa ver perfeitamente. W na tag P, vamos dar o nome da classe e também queremos usar a interpolação de strings Agora, vamos ter o texto. Vamos manter a cor. Então, vamos ter aqui 476 26d. Seven C. Bom. Talvez você não perceba, mas a cor foi aplicada. Agora, vamos fazer com a fonte. Nós podemos fazer isso aqui. Não há problema. Vamos fazer int dot class name. Mais uma vez, salve. Tudo bem. Agora, dê uma olhada. Bom. O texto será G, que será mapeado para o tamanho da fonte e a altura da linha, e isso fará com que seja de 1,2 m. Em um dispositivo pequeno, o texto Bs em G, texto, excel. Vamos fazer uma transação e, em seguida, a duração Vamos fazer com que sejam 500. Vamos fazer com que se transforme. A opacidade, a opacidade deve ser 100. Está tudo bem. Depois da tag P, queremos exibir os títulos. Vamos usar uma etiqueta H one. Vamos fazer isso com uma etiqueta H two. Com o H dois, deixe-me mostrar, vamos fazer o título dos pontos de dados do mapa Quando eu clico no front-end, agora temos o front-end. Quando eu clico no back-end, temos o back-end. Para e outras coisas, temos a ferramenta e outras coisas. Vamos mostrar os itens, as habilidades relacionadas. Antes de prosseguirmos, temos que estilizar a tag H two. Rapidamente, vamos dar o nome da classe estrela. As fontes, corpo retal. A cor do texto será a mesma cópia, venha aqui e cole. Texto de três células. Em um dispositivo pequeno, envie d para excel. Em um dispositivo médio, envie três mensagens de texto em Excel. Agora, estamos tentando aplicar um tamanho de fonte diferente em cada tela. Cada ponto de interrupção. Margem seis abaixo, a largura é 44. Em um dispositivo médio, a largura será cinco, seis. Vamos fazer uma transação. A duração, 50. Então, teremos uma transformação. Especifique a opacidade como 100 . Simples assim. Salve no navegador, lindo. Dê uma olhada. Exatamente o resultado esperado. Volte para o código. Depois da etiqueta H two. Vamos formatar rapidamente o código para um recuo adequado. Pressione então o teclado shift e a opção Ken e, em seguida, toque na tecla F. Além disso, você pode clicar em formatar documento com formato de pré-código. Depois da tag H two, teremos uma tag UL. Agora, queremos disparar a chave correspondente ao título. Vamos fazer isso rapidamente. Aqui, vamos fazer um mapa de pontos da matriz de pontos do Map Data. Vamos aprender habilidades, que representam cada item dentro da matriz. Em seguida, defina-o para uma função de seta. Queremos retornar uma interface de usuário, então você precisa abrir e fechar parênteses. E, por favor, não use o suporte Ci. Agora vamos ter uma etiqueta LI. Dentro da tag LI, temos que exibir a habilidade. Save e C. Opa. Deveriam ser habilidades. Tudo bem. Vamos dar uma olhada. Agora, role para baixo. Aqui está. Linda. Vamos dar um estilo e fazer com que a fonte tenha uma aparência extremamente incrível. Tudo bem. A tag UL, dê a ela o nome da classe. Vamos usar a interpolação de strings. Em primeiro lugar, a fonte será o nome da classe d dot. O peso da fonte é 300. Último disco. O último tipo de estilo é disco. A cor do texto será a mesma com esta cópia de destaque colada aqui M oito, margem esquerda, oito e dispositivo de ampliação, M dez O texto B, que mapeia a altura da linha e o tamanho da fonte. Em um dispositivo grande, envie uma mensagem de texto G, S, transação, Desculpe. A duração é sempre 500. Em seguida, transforme. A opacidade é 100. Ok, Save. Veja como ele aparece agora. Oops diz: Oh, meu Deus, dê uma olhada. Gente, assim seja. Salve e vamos dar uma olhada. OK. Linda. Tudo parece bem, e eu gosto disso. Quando você clica na extremidade B, a habilidade relacionada ao back-end aparece aqui Oh meu Deus. Diga-me, não parece bom? Claro que sim. Ok, vamos continuar. Em um dispositivo móvel, queremos ocultar esse layout de grade aqui, esses botões e, em seguida, somente esse cartão será exibido Portanto, precisamos de outra ponta dentro do cartão para alternar entre as balanças Vamos fazer isso na próxima palestra. 55. Contagem de habilidades: Queremos fazer algo excepcional. Queremos criar um novo cartão no canto superior direito desse cartão. Vamos fazer isso rapidamente. Após a tag de encerramento da seção, teremos um d com o nome da classe. Vamos ter uma posição absoluta. Perspectiva. 500. Vamos dar menos sete do topo Em um dispositivo pequeno, menos oito da parte superior. O direito é zero e um dispositivo pequeno. O direito é 20. Começará a partir de 20 em um dispositivo menor. E então, vamos dar a ele um nome de classe de cartão. Por favor, anote este cartão. Vamos estilizá-lo no futuro. Agora, depois disso, vamos examinar o script Java. Fechou o D. Agora, dentro, vamos fazer se invertido é igual a verdadeiro, vamos ter um nome de classe invertido e então, não vamos ter nenhum nome de classe Formate também o código para ter um recuo adequado. Dentro do D, teremos outro dif, forneça o cartão de nome da classe interno Vamos estilizar o interior do cartão com Cs. No interior do cartão, teremos outro dif, fornecendo o nome da classe Queremos que as fronteiras sejam arredondadas. Os Cs, vamos deixar claro. O texto dentro deste cartão, vamos transformá-lo em sete Excel. Em um dispositivo extra grande, o texto nove se destaca. A fonte será preta reta. Texto branco. BG, vamos dar a ela uma cor de fundo da bolsa, e queremos que a cor da bolsa tenha exatamente a mesma cor de texto que estamos Copie tudo dentro do estilo personalizado e cole-o nele. Salve e veja o que temos de operações. Temos que fechar o D. Nada foi exibido ainda. Agora, depois da cor de fundo, queremos que o preenchimento seja cinco um dispositivo extra grande, o preenchimento será oito A largura é 28. A altura é 28. Um dispositivo extra grande, com largura 48. Novamente, um dispositivo extra grande, com 48 de altura. Vamos formatar o código. Vamos fazer com que ela se transforme, transacione, a duração 500 Então, teremos que transformar e preservar. Agora queremos girar menos , girar seis. Novamente, vamos fazer transform preserve. Feito isso, devemos ser capazes de ver o cartão aqui. Você pode ver, agora temos um cartão aqui. O que queremos fazer é exibir a contagem dentro do cartão. Aqui vamos abordar. No intervalo, vamos mapear pontos de dados Ct. Antes de continuarmos destacando e cortando, queremos fazer isso fora do espaço. Agora vamos ver como fica no navegador. Perfeito. L Vamos estilizar a extensão. Dê a ele um traço de texto de nome de classe para o Excel, um dispositivo extra grande, texto do Excel Margem direita, dois, e um pequeno dispositivo, M R, que é a margem direita, será três. Feito isso, teremos uma estrela entre o vão para deixá-la linda. Agora entendemos. Tudo aparece conforme o esperado. Linda. Linda. Tommy. Não parece bom? Claro que sim. Perfeito, pessoal. Tudo bem. Foi uma jornada muito longa. Tendo feito isso. O próximo na fila é implementar a próxima votação e a anterior, diretamente no cartão Simplesmente porque em dispositivos móveis, os bots diretamente no layout da grade ficarão invisíveis. Deixe-me te mostrar. Isso é apenas no iPad e. Vamos para o iPhone. Role para baixo. Veja, todos os botins desapareceram Então, queremos uma bunda para alternar entre os céus exatamente onde está Tudo bem, então vamos fazer isso na próxima palestra. 56. Button Flip: Tudo bem, então o componente Sobre mim está configurado e tudo está funcionando perfeitamente como esperado. Mais uma coisa. Precisamos implementar a próxima votação e a anterior. Coloque o cartão. Todos vocês sabem que a rede atingirá um dispositivo móvel Então, precisamos de um bote para nos movermos entre as balanças, e o bumbum estará aqui Deixe-me mostrar para você em um dispositivo móvel. Você vê? A borda da grade desapareceu. Temos que implementar a coronha diretamente no cartão. Vamos fazer isso rapidamente. Depois desse d de fechamento, teremos outro D. Dê o nome da classe. Vamos posicioná-lo de forma absoluta. Ou então. Da direita, teremos dez. Os cinco últimos. E então teremos uma tela flexível. Dentro, teremos uma etiqueta A. Dentro da tag A, temos que exibir o SVG. Essa tag manipulará a funcionalidade da anterior. Vamos implementar rapidamente o clique, para que você entenda. Ao clicar na tag A, chamaremos o identificador previos Não. Dentro do rebocador A, vamos colar o SVG Volte para os resultados do código do MD. Então você vai ver o SVG anterior at me flip Copie das linhas 527 2541. Destaque a cópia, dentro da tag A. Colar. Certifique-se de formatar, salvar e ver o que temos. Como o SVG é branco, talvez você não o perceba na tela Vamos mudar para vermelho. Vamos ver o que temos. L Vamos recarregar Eu já vi isso. Você pode ver? Aqui está? Tudo bem. Vamos estilizá-lo rapidamente. Vamos torná-lo branco. Vamos dar à tag A um nome de classe. A largura é 12, a altura é 12. Arredondado, Excel. Queremos que a fronteira tenha um pouco de curvas. Acho que devemos especificar o plano de fundo para que você possa ver na tela. BG 47, 626d. C. Aqui está. Você pode ver? Linda. Agora vamos continuar. A margem direita será uma. Vamos ter uma transformação. Tranção, duração, vamos fazer com que seja 300. Aqui está. O cosor deve ser pontiagudo. passar o mouse, quando você pressiona o botão, traduziremos por Vai subir um pouco com uma animação fofa. Deixe-me te mostrar. Vamos espalhar isso. Agora, quando eu passo o mouse sobre ele, ele se move para baixo. Não, queremos que suba. Temos que especificar um valor negativo para aumentá-lo. Vamos fazer menos, traduzir y um, que é menos Experimente. Você pode ver? Ele sobe? Bom. Eu te disse que vou explicar cada pedacinho da aula de utilitários eólicos traseiros. Vamos justificar o conteúdo para centralizar. E então os itens se alinham ao centro. Teremos o SVG no centro do cartão. Eu ainda não apareci no centro. Olha, o SVG ainda está aqui. Antes que todo o material funcione, vamos fazer com que ele seja exibido de forma flexível E veja, agora os itens serão centralizados. Você pode ver? Precisamos exibir o flex antes de podermos alinhar e justificar Está bem? Eu acho que isso muitas vezes agora. É legal assim. Está tudo bem. Não precisamos fazer muita coisa aqui. Então, o que vou fazer agora é simples. Temos que duplicar os destaques da tag A das linhas 182, dois, 199, duplicá-los ou você pode Então, temos a primeira etiqueta A. Essa é a primeira etiqueta A. E então esta é a segunda etiqueta A. Quando você economiza, certo. Então, nós temos isso assim. Agora, ao clicar, clique em. Então, temos os botões fazendo exatamente a mesma coisa. Você pode ver? Isso é anterior. Assista. OK. Agora temos que implementá-lo para a próxima. Primeiro, temos que remover esse SVG, destaque em 242217. Limpe-o e volte para o recurso de código dot MD. Aqui, temos que destacar esse SVG, o próximo SVG para a frota A M. Destaque a cópia, venha aqui e cole. Agora, formate rapidamente o código. Limpe a alça anterior. Vamos fazer o próximo tratamento. Quando você vê o navegador, tudo aparece como esperado Anterior, anterior e pode ir em seguida, em seguida. Para trás, para trás, para frente, para frente, para frente e para frente sempre Linda. Tudo está funcionando perfeitamente bem. Então, temos que dar uma olhada em um dispositivo móvel. Boas notícias. Agora, no dispositivo móvel, temos o botão para passar de uma habilidade para a ordem. Agora temos a habilidade de desenvolvedor de back-end. E então você pode voltar, pode seguir em frente, pode voltar. Você pode ver? Tudo está funcionando perfeitamente bem. E eu adoro os resultados finais. Tudo bem. Então, vamos rapidamente para a próxima palestra, onde começaremos a implementar o f. Isso é válido por enquanto Nos vemos na próxima palestra. 57. Animação de aleta: Bem-vindo de volta à aula. Nesta palestra, queremos implementar a animação nos flips quando o cartão é No momento, você pode ver como ele gira tradicionalmente. Não é legal assim. OK. Vamos adicionar algumas boas animações a ele. Volte para o código VS. Abra o Explorer. Direto no diretório Sobre mim. Clique com o botão direito do mouse em novo arquivo. Vou chamá-lo de Abt M dot CSS. Primeiro, temos que estilizar o cartão. Cartão de pontos. Deixe-me te mostrar. Neste D? Agora, vamos pegar o cartão. Aqui está. Sim. Então, vamos fazer isso aqui. A perspectiva de 800 pixels. O ponteiro do cursor, vamos ter uma tela flexível, justifica o conteúdo à direita O cartão A, cartão NA. Mais uma vez, deixe-me te mostrar. Aqui está. Então, neste cartão aqui, acho que a melhor maneira de mostrar as coisas é mudar a cor do fundo. Vamos supor que a cor de fundo seja vermelho 500. Agora, quando você salva e verifica o navegador, consegue ver? Aqui está o cartão interno. Agora deixe-me mostrar o cartão do contêiner. Este é o cartão do contêiner. Vamos fazer BG, Blue 500. Salve no navegador, aqui está. Você pode ver, esta carta aqui é colocada sobre esta outra carta. Então, vamos estilizá-lo rapidamente. Vamos obter a largura 100%, a altura, 100%. Transação. Vamos fazer com que ele se transforme em 0,6 segundos. Depois, o estilo de transformação. Preserve três d. Antes de prosseguirmos, precisamos vincular o componente ao arquivo CSS. Volte para Sobre mim, vá até o topo e vamos fazer isso de cabeça Vamos colocar s Abt M C S S. Feito isso, volte para About M Css Temos que estilizar os pontos do cartão. Cartão virado em operações. Dê uma olhada. Deve ser um concatnador Transformar. Queremos girar no ângulo Y x 90 graus Vamos fazer disso um ângulo negativo. Fit Dash à esquerda. E, a propósito, deixe-me mostrar as aulas. Aqui está a alimentação restante e depois a alimentação sai. Para a esquerda alimentada, teremos uma transação, a opacidade de Transforme também 0,5 segundo, e aqui o de opacidade. Transforme a tradução no eixo x. Vamos fazer com que seja zero. Para o ajuste esquerdo e o ajuste , existe opacidade. Transformar. Transforme, traduza x, vamos ter 40%. Feito tudo isso, vamos voltar rapidamente ao Navegador e verificar se está bem feito. Dê uma olhada. L Vamos clicar. Linda. Veja, dentro do cartão, temos um lindo clipe de animação. Você pode ver? Mas também queremos que isso afete esta carta aqui. O que fazemos agora? Vamos ver o que acontece. Antes de prosseguirmos, precisamos mudar a cor do cartão. Tem exatamente a mesma cor. Esse cara não tem cor, mas esse cara faz B G. Alright. Linda. Vamos voltar ao CSS. Comece a partir daqui, o cartão, carrinho em cut flip cut.in Oh, meu Deus. Gente, tirem as coisas. Quando você faz isso assim, tudo vai funcionar. Sim, M. R. Tente novamente, tente de novo e de novo. Isso é realmente fantástico. Dê uma olhada. E então podemos alterá-lo com os botões. No iPad. Funciona. Isso é incrível. Tudo bem. Terminamos com o componente Sobre. Mas o que temos que fazer na próxima palestra é corrigir algumas coisas, como a parte superior da margem em um dispositivo móvel Vamos ver. Consegue ver isso aqui? A margem superior do calçado para dispositivos móveis deve diminuir um pouco. 58. Configurações de controle deslizante de testemunho: Oi Bem-vindo de volta à aula. Nesta palestra, vamos projetar o componente de depoimento Mas antes de prosseguirmos, precisamos implementar as configurações do controle deslizante Abra rapidamente o explorador, comum B, abra o componente. Dentro do componente, clique com o botão direito do mouse em Novo Fed. Testemunho. Então, clique com o botão direito do mouse em depoimento, Sem arquivo, ponto de depoimento GS RFC para gerar o componente funcional Vamos renderizar o depoimento na página principal. Logo abaixo do componente M separado. Nós vamos fazer um depoimento. E, por favor, certifique-se de importá-lo na parte superior. Salve e depois volte para o depoimento. Vamos implementar rapidamente as configurações do controle deslizante. Para implementar as configurações do controle deslizante, precisamos fazer algumas importações Abra as casas de componentes domésticos. Vamos destacar rapidamente as linhas dois a quatro. Venha até o topo e depois cole. Além disso, vamos fazer uso da cabeça. Também temos que copiar das linhas cinco a dez. Em seguida, cola. Por fim, vamos copiar rapidamente as propriedades do controle deslizante. Abra o recurso de código MD e, em seguida, role para baixo. Você verá as configurações do controle deslizante para depoimento. Destacar. Destaques de 584 2667. Copie, volte ao código e cole. Deixe-me examinar rapidamente as configurações. Aqui temos uma configuração variável. Obviamente, essa variável é um objeto. Dentro do objeto, temos as propriedades do controle deslizante. Definimos o infinito como verdadeiro, que fará com que o controle deslizante role continuamente sem terminar Aqui fizemos um slide para mostrar que são três. Slide to scroll é um, então você só pode rolar um slide por vez. A velocidade é de 3.000 milissegundos. A seta está configurada para forçar, que é a seta para a esquerda e para a direita, então não precisamos dela aqui. Definimos a placa automática como verdadeira, que significa que o controle deslizante começará a rolar sem precisar fazer isso manualmente O modo central é definido como verdadeiro e, em seguida, o teclado central, que é o espaço entre cada controle deslizante Está definido para dez px, e aqui temos a velocidade de preenchimento automático de 3.000 milissegundos Agora, dentro da capacidade de resposta, é claro, é uma área do objeto, e então temos o ponto de interrupção Agora, no ponto de interrupção de 17 60, queremos alterar as configurações, as configurações aqui Nesse ponto de interrupção, teremos dois slides para mostrar O slide para rolar será um. Infinito é definido como verdadeiro para loop contínuo e, em seguida, o ponto é definido para cair, e assim por diante, até chegar ao menor ponto de interrupção Formata o código. Bom. Agora terminamos com as configurações do controle deslizante. Vamos prosseguir rapidamente para a próxima palestra onde começaremos a elaborar o depoimento Nos vemos na próxima palestra. 59. Design de controle deslizante de testemunho: Vamos continuar com o design do depoimento. Aqui com o retorno. Limpe isso. Vamos dar uma identificação a esse ID. Testemunho. Nós neste d, vamos ter outro d, te dando o nome da classe. A altura máxima será de 450 pixels. Colocar a parte superior e dividir a parte inferior é 12. Em um dispositivo grande, colocar a parte esquerda à direita é 12 Em um dispositivo médio, colocar a parte esquerda e a direita é cinco E o preenchimento padrão será três. Vamos arredondá-lo G. Feito isso, vamos criar rapidamente o layout. Agora abra o ponto da página. Queremos copiar esse estilo embutido para o layout. Coloque um mouse aqui. Em seguida, cole. Tudo vai ser o mesmo, então não precisamos fazer nenhuma alteração. No navegador, agora temos o layout. Deixa eu te mostrar, aqui está. Quando começarmos a exibir os itens, estará muito limpo para você ver. Dentro desse d, teremos outro d, dê a ele o nome da classe. Em um dispositivo grande, teremos um contêiner. A margem esquerda, vire à direita é automática. Padin à esquerda, vire à direita, zero. Em um dispositivo pequeno, a altura máxima é de 350 pixels. Agora, dentro desse df, teremos outro df, dê a ele um nome de classe O texto ficará alinhado ao centro. Agora vamos ter uma tag de cabeçalho e vou fazer o que meus clientes dizem sobre mim. E aqui está. Vai ser um título. Agora, vamos rapidamente abrir a barraca. A fonte extra é madeira. O texto cinco do Excel. Queremos que seja grande, então agora você o tem. Margem inferior e B seis. O texto. Vamos atribuir um tamanho de texto e queremos manter a consistência com a cor de teste do título, que será 48 ADD. Quando você salva, e aqui está. Tudo bem. Linda. Depois da tag H two, teremos uma tag p. Então essa tag P será a descrição. Acesse rapidamente o recurso de código, copie a descrição do depoimento e cole-a entre elas Quando você salva, e aqui está. Vamos dar um estilo a isso. Dê à tag P um nome de classe. Queremos usar a interpolação de strings. Máximo de D W para Excel. A ponte 200. Reco uma prancha. A margem esquerda e direita é automática. A margem inferior é 12. Em um dispositivo grande, a margem inferior é 24. Tudo bem. Agora vamos dar uma olhada. Bom. Parece muito bom. Mamãe. Feito isso, vamos implementar o controle deslizante. Logo após essa morte. Vamos renderizar o controle deslizante. Lembre-se de que importamos o controle deslizante do react slip. Vamos dar a ela um nome de classe. Em seguida, faremos a parte superior, dez. Depois também a rolagem de cos, toda rolagem. Vamos criar rapidamente os itens dentro do controle deslizante. Vamos ter um d para o nome da classe. Vamos ter uma tela flexível. A parte à esquerda é zero. Ganhe esse d, teremos outro d. A largura é 100%. Sim. Opa. Dê uma olhada. Não deve haver nenhum espaço entre eles. Sim. Em um dispositivo pequeno, a largura é de 95%. Acolchoamento à esquerda, 20. A margem é oral. As bordas serão arredondadas para o Excel. Então, estamos tentando criar o cartão. Sim. Vamos dar a ele o preenchimento de quatro Em um dispositivo grande, o preenchimento é seis. Vamos dar uma altura média de 250 pixels. E isso é tudo. Temos o cartão exibido no navegador. Mas não será visível simplesmente porque não especificamos a empresa. Quando você vem e faz PG, verde 500. Agora temos o cartão no navegador. Não queremos usar isso. Em vez disso, queremos configurar um layout dentro do cartão. Aperte rapidamente na parte superior e vamos copiar o estilo embutido. Cole aqui mesmo. Limpe a largura e, portanto, vamos fazer as configurações necessárias. Aqui vamos fazer com que seja de cinco graus. Essa porção será posicionada em cinco graus com a cor azul, 48 AFD E. Agora, confira Você pode ver que o cartão agora está dividido em duas partes iguais, a parte branca na parte superior e a azul na parte inferior. Mas não é isso que queremos. Agora vamos fazer dez porque é muito grande e vamos fazer com que a parte branca seja 90. Linda. Vamos exibir os itens dentro do cartão. Agora, dentro do cartão, teremos um D, dando o nome da classe. Vamos fazer com que seja exibido de forma flexível. Outro. Cara, 100 pixels para a média w. Então vamos ter uma tag IMD, SRC As imagens que vamos usar estão diretamente no diretório público. Você pode dar uma olhada, e então eu vou fazer Papo dot PNG. Agora seguro, e agora temos roxo na tela. Tudo bem, queremos fazer algumas paradas aqui em relação às configurações. Todos sabemos que nem todas as imagens são arredondadas. O que vamos fazer é dar um tamanho à imagem para que, quando você tiver imagens de quatro cantos, ela também possa ser arredondada. Agora, o que eu vou fazer. Vamos rapidamente dar a ela um nome de classe. 20 de altura, 20 arredondados completos. Aqui está o papai. Você pode ver? Linda. Novamente, temos que especificar a alternativa. E eu vou fazer uma foto de clientes. Por favor, não faça a imagem do cliente. Aprendi que a imagem agora é um caminho fundamental. Agora temos a foto do cliente. Mm hmm Não exibi a imagem. Também precisamos exibir a direita. Depois desse df, teremos outro df. Você precisa de um contêiner para definir o formato do seu site. Portanto, o D é algo do qual você não pode fugir. Dentro do nome da classe, vamos fazer com que ela exiba flex, coluna Flex, que é a direção flexível Em seguida, vamos fazer gab x four, que é a lacuna da coluna Em um dispositivo médio, queremos que ele flexione a coluna de direção Também em um dispositivo médio, os itens se alinham ao centro. Bom. Então, dentro dessa definição, teremos outra definição. Como desenvolvedor de front-end, o df é seu amigo A sagacidade frontal será média. Base do traço de texto, que será mapeada para o tamanho da frente e a altura da linha Feito. Então, dentro da definição, eu vou fazer Daisy Papo Tudo bem. Parece engraçado, certo? Aqui está. O que mais temos que fazer novamente? Agora, após esse d de fechamento, teremos outro d com o nome da classe. Mas desta vez, queremos usar a interpolação de strings Na frente, vamos ser 300. Em seguida, vamos usar o Google Hind Hind, nome da classe. A cor do texto. Ele terá a mesma cor de teste com o título. Não preciso fazer isso duas vezes. Eu apenas destaco e copio e, em seguida, levanto aqui. Feche o d. E dentro do d, eu vou fazer estudantes do YouTube. Das Papo comentou no meu canal do YouTube, então eu tenho que levantá-lo aqui. Não fiz isso. Nós vamos ter uma etiqueta P. Ganhe a tag P, vamos voltar rapidamente ao recurso de código e copiar a resenha do Des Papo. Aqui está. Destaque e copie , cole na tag P. Quando você salva no navegador, o. Linda. Vamos alinhar rapidamente a tag p. Dê a ele um nome de classe. Novamente, queremos fazer uso da interpolação de strings. Na margem inferior, serão seis, a fonte. Então você pode ver que a fonte está muito em negrito. Eu não gosto desse jeito, então queremos que pareça um pouco mais claro. Então, a fonte especifica 200 para o w. Agora você vê Code. Vamos usar o bloco reitor. A altura média, 70 pixels. O texto, vamos fazer com que seja de 15 pixels. Margem superior. Vamos fazer com que sejam três. Agora salve linda. Primeiro, vamos formatar o código. Você pode ver, esse cara, eles estão alinhados ao centro, e esse não é o resultado esperado Vamos lá, dê uma olhada. Esta é a letra d no item médio do dispositivo alinhado ao centro Eu não acho que isso seja necessário. Então agora nós temos isso. Feito isso, vamos aplicar rapidamente o slide. Role até o topo, onde temos o controle deslizante. Primeiro, quero dizer que a lacuna entre o controle deslizante e a descrição é muito grande. Então eu acho que temos que remover alguma coisa. Onde temos o controle deslizante? Slider, onde você está? Oh, meu Deus. Aqui está. Vamos remover a almofada na banheira. Feito isso, vamos aplicar o controle deslizante aqui e, em seguida, as configurações Simples assim. Agora, o que vou fazer é porque precisamos de vários itens para que o slide funcione. O destaque D. Vamos destacar as linhas um, dois, 42160. Você pode copiar, mas para mim, eu só tenho que duplicá-lo quantas vezes eu quiser Salve, vamos ver o que temos no navegador. Cama. Agora, tudo está funcionando perfeitamente, conforme o esperado. Vamos verificar rapidamente a capacidade de resposta móvel. No iPad, o slide a ser exibido é um deles. Vamos dar uma olhada em telefones celulares. Além disso, o slide a ser mostrado é um deles. De fato, é responsivo em nossa plataforma. Isso é lindo. Tudo parece bem, e eu adoro isso. Isso está desligado agora. Com certeza, começaremos a projetar o. Te vejo, Idee. 60. Distintivo de rodapé: Olá, bem-vindo de volta à aula. Nesta palestra, vamos projetar o componente fa. Se eu fizer isso, vamos começar. Comum B para abrir o explorador. Certifique-se de abrir o componente dentro do filtro, clique com o botão direito do mouse e crie um novo arquivo. Gás gordo. Outro. Ganhe o filtro. Codon dot s. Gere o componente funcional Salve e volte para o fa s. RO de C para gerar o componente funcional de reação. O filtro permanecerá consistente durante todo o projeto. Portanto, temos que renderizá-lo dentro do layout. Abra os pontos do layout s. Vamos renderizar o filtro. Feche-a com a tag de fechamento automático e certifique-se de importá-la na parte superior. Seguro e, em seguida, feche o ponto do layout como. Agora vamos começar com o ventilador. Vamos rapidamente dar a esse ID dv ID igual. Fa. Agora vamos ver o que temos no navegador. Você pode ver que esse é o filtro aqui? E mesmo se você abrir a página de detalhes do portfólio. Ao rolar para baixo, você verá o filtro. Você pode ver? Isso acontece simplesmente porque o renderizamos dentro do layout para as O filtro será exibido em todas as páginas. Limpe-o. Vamos rapidamente dar a ela um nome de classe. A margem superior está vazia. Vamos fazer com que seja de 90 pixels. Dentro do d, teremos outro df, dê a ele um nome de classe A cor de fundo será branca. Parte do top zero. Em um dispositivo grande, faça parte dos 100 melhores pis. Você fecha o d, e agora vamos ter outro df, dê a ele um nome de classe O máximo w max 11 40 psi. F O fundo será azul d 500. Arredondado, excelente. Vamos fechar o D. Vamos torná-lo responsivo. Px 20 pixels. Em um dispositivo pequeno, px 64 pixels. Py 64 pixels. Mm auto. Este é o preenchimento à esquerda e à direita. O acolchoamento esquerdo e direito em um dispositivo pequeno, o acolchoamento superior e o acolchoamento Agora vamos ter um estilo embutido. Vamos fazer com que ele se transforme. Traduza zero pixels, 70 pixels. Agora, quando você verifica o navegador, aqui está. Você pode ver? Agradável. Tudo bem Tudo está indo bem. Vamos exibir o conteúdo dentro do. Vamos ter um d. Vamos ter a coluna 12 do modelo de grade de grade de exibição. Outro. A coluna da grade é 12. Em um dispositivo grande, a coluna da grade é nove. Dentro do d, teremos uma tag P, e dentro do rebocador P eu estarei pronto para começar E ele é isso. Agora, vamos alinhá-lo rapidamente de maneira adequada. O texto de 30 pixels. A cor do teste é branca. Vamos alinhar rapidamente o teste ao centro. Em um dispositivo grande. Vamos iniciar o texto. E agora você tem. Em um dispositivo grande, ele começará daqui, mas em um dispositivo menor, o teste será alinhado ao centro Dê uma olhada. Você pode ver? Linda. Logo após a tag P, teremos outra tag P. Em seguida, colarei o direito correspondente em. Você pode usar essa tag P para informar ao seu cliente sua empresa. Quando você vê, agora temos isso assim. Vamos dar isso rapidamente. O texto será branco. A fonte soa. Novamente, vamos fazer exatamente o mesmo aqui. Eu só tenho que destacar a cópia e, em seguida, levantá-la aqui. Salve e veja o que temos. Linda. Novamente, em um dispositivo menor, ele se alinhará ao centro Ótimo. O que mais temos que fazer novamente? Agora precisamos do barco. Logo após esse fechamento D. Vamos ter uma div com o nome da classe chamada spam 12 Em um dispositivo grande. Novamente, eu só tenho que destacar e copiar esse cara. Venha aqui Colar. Vamos mudar para três. Feche o d, logo dentro do d. Vamos ter outro. Vamos fazer com que ele seja exibido de forma flexível, justifique o conteúdo para centralizar A margem está entre os cinco primeiros. Mas em um dispositivo grande, a margem é zero. Dentro do d, teremos uma tag a. Um rebocador, dentro do templo H interno da etiqueta A, vamos fazer, inscreva-se Nós o temos na fúria do contêiner. Vamos estilizá-lo rapidamente. Dê a ele um nome de classe. Fonte Sans. A família da fonte é Sans. Os Cs, vamos deixar claro. P X dez, P Y, cinco. O BG, que é a cor de fundo. Agora, vamos fazer algo diferente por aqui. 10, 9ff. Opa, dê uma olhada. Agora temos a bunda. Mas queremos que as bordas tenham um pouco de curvas. O que vou fazer agora é um traço arredondado, Excel. Parece muito bom. O texto branco. A fonte nós, vamos torná-la média. Texto g, e isso será mapeado para o tamanho da fonte e a altura da linha. Tudo bem Eu acho que isso é tudo. Ao salvar, formate o código com a mesma rapidez para um recuo adequado E agora temos algo lindo assim. Feito isso, vamos prosseguir para a próxima palestra, onde vamos projetar o pai Assistindo à próxima palestra. 61. Ícones de rodapé: Vamos continuar com a banheira de comida. Abra o recurso de código dot MD. Vamos copiar rapidamente os itens puta, que é a matriz de dados Eu só tenho que destacar o 6852 708. Role até o topo e cole-o no componente desta forma. Feito isso, o ninho e a linha devem exibir o logotipo. Logo após o anúncio de encerramento, teremos uma etiqueta de maconha. Vamos rapidamente dar um plano de fundo. BG 23740. Dentro do pé, teremos um d. M X auto, que é a margem esquerda e direita. Tela Max W do Excel. Espaço, oito. P X quatro, e o P Y será 16. Obviamente, agora você deve estar familiarizado com as classes de utilitários eólicos traseiros. Em um dispositivo pequeno, P X seis, em um dispositivo grande, espaço, y, 16 LG, Px oito. Vamos formatar o código. Outro, vamos torná-lo um contêiner. X automático. P para D em um dispositivo médio. Queremos que seja aquecido. Em seguida, temos que exibir bloco, margem superior, caneta. As margens esquerda e direita estão definidas como automáticas. A largura máxima é de 12.80 pixels, e estamos especificando a margem superior e o botão de margem Você está familiarizado com o resto das aulas. Linda. Agora vamos exibir o logotipo. Em um dispositivo médio, queremos que ele seja escondido. Caso contrário, vamos fazer com que ele seja exibido em bloco. Outro. O texto é de cem. Vamos ter uma tela flexível, justificar o conteúdo para O topo da margem é dez. O que devemos fazer agora é copiar o SVG e depois colá-lo entre esse d. Volte para o recurso de código dot MD Vamos destacar a partir de 712 2742. Destaque do SVG de abertura para o SVG de fechamento. Copie, volte para o código e cole-o nele. Vamos formatar o código. Linda. Depois desse encerramento teremos uma etiqueta P, e eu vou fazer isso, você merece que ela seja vista. Vamos estilizar rapidamente a tag P. Dê o nome da classe. Margem os quatro ases máximos. Isso fará com que a largura máxima seja de 20 M. Texto. Que cor de texto vamos usar aqui? Sete b858b. As fontes, que é a família da fonte. Em seguida, vamos alinhá-lo ao centro. Tudo bem. Agora vamos ter uma etiqueta P. E isso vai ser uma cópia, certo. Teremos exatamente a mesma cor, exatamente a mesma cor de teste, então só temos que levantá-la até lá. Novamente, exatamente a mesma fonte, destaque e copie , cole aqui assim e pronto. Novamente, o que temos que fazer depois de revelar d, teremos outro d. Vamos fazer com que ele exiba a grade A lacuna seis, a coluna do modelo de grade, seis, e a mediana do dispositivo, parte e parte superior é 20 E agora queremos exibir o logotipo em um dispositivo maior. Eu vou fazer em um dispositivo médio. Vamos bloqueá-lo, senão, vamos escondê-lo. Agora vamos ter outro d. Text Blue 500. Tudo bem. Também precisamos copiar e colar o SVG. Já está destacado. Eu só tenho que copiar. Cole-o no formato d do código. SF role até o topo, teremos exatamente as mesmas informações aqui Eu só tenho que destacar a cópia de todas as tags P. Em seguida, cole logo após essa profundidade. Feito isso, confira no navegador. Tudo bem, nós temos o logotipo. O logotipo azul aparecerá em um dispositivo grande e, em um dispositivo menor, mudaremos o logotipo para verde e assim por diante. Então, deixe-me te mostrar rapidamente. Role até o topo. O primeiro aqui é o aquecimento do logotipo em dispositivos médios. E então ele aparecerá apenas em um dispositivo menor. E o segundo logotipo de um aqui, nós o aquecemos em um dispositivo menor e o exibimos em dispositivos médios, e então esse é o logotipo. Simples assim. Mas o problema que temos agora é que as coisas não estão bem alinhadas Então, vamos ver o que acontece. Role na parte superior. Tudo bem, pessoal. Dê uma olhada. P X. Vamos mudar isso e ver se vamos conseguir o alinhamento adequado Recarregar. A mesma coisa aqui. Temos que voltar ao código. Tudo bem. Então, aqui, você sabe, nós retiramos esse código daqui, certo? Então, temos que mudar algumas das propriedades. Não queremos que ele se alinhe ao centro. Feito isso, vá até o topo. A coluna do modelo de grade aqui será cinco. E acho que isso resolverá o problema. Tudo bem. Linda. Vamos dar uma olhada ou mais por dispositivo. Esse é o resultado esperado. Tudo bem, pessoal. O rodapé está gradualmente tomando forma. O ninho na fila é para exibir os itens. Vamos fazer isso na próxima palestra. 62. Itens de rodapé: Vamos exibir rapidamente os itens puta. E bem no topo. Portanto, temos uma variedade de serviços. Na matriz, temos todas as coisas que você pode renderizar E, a propósito, você pode alterá-lo do seu lado. Sim. Assim, você pode especificar o tipo de serviço que você renderiza. Aqui também, temos uma variedade de companhias. Temos uma análise rápida da conta da equipe. E aqui temos uma série de pilhas, que contêm o contato, as perguntas mais frequentes e o chat ao vivo E aqui temos as políticas legais. Agora vamos mostrar todas as coisas na tela Logo após seu encerramento, dv. Vamos ter um d, dar a ele um nome de classe em um dispositivo médio. Vamos fazer com que ele seja bloqueado, caso contrário, vamos escondê-lo em um dispositivo menor. Portanto, a ideia é usar o accodu para alternar e abrir os itens Agora vamos ter uma etiqueta P. Eu vou fazer serviços. Vamos dar uma olhada. A mídia da fonte, que é a fonte úmida. Texto branco. Tamanho da fonte. Tudo bem. Após o fechamento da tag P, teremos nessa lista, uma UL, dentro da UL, vamos mapear os itens. Aqui eu vou fazer o mapa de pontos do Servis. Então, estamos tentando mapear essa matriz de dados, que é serviço. Quando mapearmos essa matriz, teremos todos esses itens divididos na tela, que são itens divididos na tela, os elementos dentro do serviço. Todos os materiais são, na verdade, básicos. Agora vamos fazer o item, e esse item representa cada elemento na matriz. Então, vamos retornar a interface do usuário. Na interface do usuário, teremos uma tag LI. Dentro da etiqueta LI, teremos um rebocador A e, em seguida, só precisamos exibir o item Salve e veja o que temos. Tudo bem. Agora nós o temos aqui. Vamos dar rapidamente o s. Dê ao rebocador A um nome de classe. O texto, sete B, 858b. O traço da fonte, Sans, que é a família da fonte No Hova, a opacidade será 75. Vamos salvar e ver, salvar. Agora temos isso no navegador. Em Hova, você vê? Mais uma coisa, vamos aproximar o ponteiro. Já está linda, mas não estou satisfeita com o alinhamento. Então, vamos ver se podemos estilizar a tag UL. Dê a ele um nome de classe. Margem seis primeiros espaços por quatro. Então, o tamanho do texto será SM. Salve o projeto. Parece mais bonito assim. Agora, depois de fazer isso, vá até o topo. Temos um, dois, três, isso significa que vamos duplicá-lo três vezes Destaques deste mergulho de abertura até o final. Eu só vou duplicá-lo três vezes. Você pode copiá-lo e colá-lo três vezes. Ok, deixe-me copiar e colar. Eu copiei, depois venho aqui, colo, colo, colo Quero facilitar o acompanhamento de todos. Se você salvar, agora temos os mesmos itens em três lugares. Então, vamos separar rapidamente os itens individuais. Se você descer até o topo, isso vai ser uma companhia. Esse é o primeiro item. Esse é o segundo item. Vamos mapear a empresa, e aqui a etiqueta P, vamos fazer a política de Copanin Acho que soa mais melhor assim . Tudo bem quando você vê. Bom. Você pode ver Beautiful Scroll no topo novamente Temos a ajuda C. Esta é a empresa, então vamos mapear a ajuda O que fazemos aqui? Links úteis. Sim. Por fim, temos que mapear o lego E aqui está. Então, vou fazer políticas ou políticas legais. O que você acha? Agora vamos fazer o mapa de pontos do ego e, em seguida, os itens serão exibidos na tela. Dê uma olhada. Linda. Então, terminamos com o rodapé em dispositivos grandes Ao verificar o dispositivo móvel, você perceberá que nada está aparecendo por lá. Não se preocupe, eu entendo que o depoimento está superando seu tamanho Definitivamente vamos consertá-lo no futuro. Nada é exibido na tela em um dispositivo pequeno. Vamos ver o que temos no iPad A. Bom. No iPad, temos isso assim. E estou adorando cada pedacinho do design. Perfeito. O ninho e a linha são para exibir os ícones de mídia social. Vamos fazer isso na próxima palestra. 63. Exibir ícones de mídia social: Bem-vindo de volta à aula. Tudo bem, vamos continuar exibindo os ícones de mídia social. Logo após esse d, teremos outro d. Um dispositivo extra grande, o máximo w será seis excel. Além disso, teremos que superar no máximo sete excel. Px dez em um dispositivo médio, Px 20. Um dispositivo extra grande, px 44, Mx ou dois Em um dispositivo menor, o Pi terá dez transbordamentos de aquecimento Agora vamos ter outro d, dê o nome da classe. Vamos fazer com que seja exibido de forma flexível. Em seguida, vamos fazer com que seja um envoltório flexível. O envoltório flexível será embrulhado. Justifique um conteúdo, espaço entre eles. Itens alinhados ao centro. Outro. A largura será de um par da tela. Um dispositivo pequeno, a largura será automática. Novamente, em um dispositivo pequeno, margem esquerda e direita é para Margem inferior é dez e um dispositivo pequeno, B zero. Opa Dê uma olhada. Linda. Agora vamos ter uma etiqueta A. Dentro da tag A, temos que colar o SVG. Abra o recurso de código. Role para baixo. Você verá os ícones fo. Vamos copiar o SVG para o Twitter. Destaque e copie. Venha aqui, cole entre a etiqueta A. Formate o código. Salve e veja o que temos na tela, e agora temos assim. Vamos rapidamente dar um estilo a ele. Dê à tag A um nome de classe. Vamos fazer com que seja exibido de forma flexível. Direção flexível, é coluna. Itens, Align Center. Além disso, justifique o conteúdo para centralizar. Tudo bem Quando você clica no ícone de mídia social, queremos abrir uma nova guia, então Target equa, em branco Na referência de hipóteses do H REF, certifique-se de colar o link do tópico ali ou do seu tweeter, por assim dizer, se houver algo parecido Feito isso, abaixo da tag de fechamento do SVG. Nós vamos ter um H cinco. Eu vou criar um tópico no Twitter. Você pode criar um tópico se tiver uma conta de tópico e também pode usar o tópico SVG Mamãe. Agora vamos dar o nome da classe. Vai ser reitor. Com Stop, vai acabar. Em dispositivos grandes, Ming está entre os três primeiros. Texto S e mais um dispositivo, texto B. Fonte, A família teremos seus filhos, e então o teste, a cor do teste será cinza 200. A transição será definida para as cores. A duração é de 300. Grupo, hove. Vamos receber uma mensagem de texto. Agora, quando você passar o mouse sobre o teste, teremos uma cor de teste azul 4,8 e do Ed. Vamos economizar e ver o que temos. Bom. Dê uma olhada. Você vê? Agora, o que vou fazer é simples. Vamos destacar essa seleção nas linhas um, nove, três, dois, dois, um, dois. Eu o duplicaria quatro vezes. Você pode copiar e colar quatro vezes. Tudo bem Quando você salva, e aqui está o resultado final. É tudo lindo. Então, vamos substituir todas as coisas. Vamos ter Instagram, drible e assim por diante Então, eu só tenho que postar a isca e depois implementá-la do meu lado É extremamente fácil fazer isso. Então, por exemplo, abra o recurso de código, então aqui está o Git SVG Destaque e copie aqui. Eu vou usar o Twitter. Agora, vou substituir esse SVG, e este é pelo Git Certifique-se de colar o URL do seu perfil ou do seu perfil do Gits no formato H. lend to format Aqui eu vou fazer o Git. Ok, deixe-me fazer isso por você. C assista à palestra no final. Este é para Dribble, destaques, limpe e cole Agora vou driblar. Aqui está o drible. O próximo é o link D. Copie o link, então vamos fazer o mesmo, nós mesmo também, temos para o Instagram. Ao salvar, dê uma olhada. Linda. Então, quando você clicar, ele abrirá uma nova página. Por exemplo, se você colou a URL do seu Github, ao clicar, ela abrirá sua conta do GitHub em uma nova Vamos também implementá-lo para o Gmail. Também temos que duplicá-lo mais uma vez. Destaque das linhas 28223 em três duplicadas. Isso será o G mail. Vamos substituí-lo pelo SVG do G mail. Tudo bem Quando você salva e verifica o navegador, aqui está o resultado final. Isso é extremamente incrível. Feito isso, vamos rapidamente para a próxima palestra para que possamos exibir esses itens em um dispositivo menor Se você fizer o check-out em um dispositivo pequeno, notará que tudo está funcionando bem, exceto os itens. 64. Menu de rodapé no dispositivo móvel: Ele está lá. Bem-vindo de volta à aula. Nesta palestra, vamos implementar o menu Futa. Quando o usuário clicar no menu, os itens serão exibidos na tela. Vamos implementá-lo rapidamente. Abra o diretório do filtro. Filtrar o ponto z. Também temos que abrir o códon Opa, dê uma olhada. Feche o explorador. Dentro do filtro, a primeira coisa que vamos fazer é importar o códon Introduz o códon a partir do códon de barra de pontos. Feito isso, a próxima linha final é passar todos esses itens como adereços para o códon Como fazemos isso? Deixe-me te mostrar rapidamente. Role para baixo. Escreva traga a seção depois do s. Vamos renderizar acordeão Feche com a etiqueta de fechamento automático. Agora temos que assumir o título e prestar serviços. Aqui, então vamos passar o conteúdo igual ao conteúdo, rolar até o topo e deixar eu te mostrar. Esse cara aqui, que é a variedade de serviços. Destaque e copie. Venha aqui e cole. Agora destaque, temos que duplicá-lo três vezes. Segure a tecla Shift e saia, toque na tecla de seta para baixo para duplicar. Duplique um, dois e três. Agora temos que mudar o título e o conteúdo. Aqui vamos ter. Na verdade, você pode conferir aqui. Deixe-me te mostrar. Então, esses são os títulos. A política de acompanhamento, links úteis e também as políticas legais Então, agora eu acho que temos a política de companhia. Destaque e copie, venha aqui e cole. Aparafuse na parte superior. Temos que passar esse conjunto de empresas como adereços para o acodeão Então, o que devemos fazer agora é passá-lo como conteúdo aqui, porque o conteúdo já é um atributo que está indo para o accodon Aqui temos os links úteis. Em seguida, destaque , limpe e cole. Temos sepse. Role até o topo. Aqui, abordaremos a ajuda, a variedade de ajudas. Por fim, para o título, teremos as políticas legais Role até o topo, onde temos a variedade de itens legais. Destaque e copie. Venha aqui. Temos que substituí-lo também. Feito isso, o ninho e a linha devem receber esses adereços dentro do acodon Faça o que salvar, volte para o acordeão gs, dentro do parâmetro desta função Vamos desestruturar o título e o conteúdo. Deixe-me te mostrar novamente. Aqui está o título e aqui está o conteúdo. Certifique-se de digitar corretamente para que você não tenha problemas Agora, tudo está feito corretamente. Declare as variáveis de estado necessárias a serem usadas. Aqui em cima, vamos portar o gancho estadual U. O gancho Ute é uma função. Portanto, temos que invocá-lo. Nós na função de estado U. Vamos entrar em vigor como estado inicial. Então, aqui vamos ter uma matriz de duas entradas. O custo está aberto, o conjunto C está aberto e, em seguida, atribua-o desta forma. Essa é a variável que contém o estado inicial e essa é a função seta que será usada para atualizar o estado inicial. Simples assim. Eu acho que você deveria me dar alguns acólitos para essas belas Agora vamos ter uma função. C, vamos chamá-lo de Tg, Tg accodu. Defina-o como uma função. Ganhe a função, vamos fazer com que o set seja aberto não aberto. Agora dentro do DUI Se, do seu lado, seu d não tiver um nome de classe, faça o que for para especificar o nome da classe. Vamos dar a borda e a borda colorida da borda d39, 39, 39 A margem inferior é quatro, a parte superior e a parte inferior. Vamos fazer com que sejam seis. Nós vamos ter outro d. Dê a ele um nome de classe. Vamos fazer com que ele seja exibido de forma flexível, justifique o espaço de conteúdo T. Alinhe os itens ao centro. O preenchimento é dois, mas em um dispositivo menor, o preenchimento é quatro A largura estará 100% cheia. Por fim, o fundo será vermelho 500 para trabalhos didáticos Sim. Win faz D? Não, eu não gosto desse jeito. Tudo bem. Quando D faz, teremos uma etiqueta H two. H dois. Ganhe a tag H two, vamos mostrar o título. Este título aqui, lembre-se de que desestruturamos aqui dentro do parâmetro da função, e ele está vindo daqui Nós o passamos como adereços para o códon e depois o recebemos aqui Como o recebemos aqui, devemos ser capazes de usá-lo em qualquer lugar ao redor do componente. Vamos ver o que temos no dispositivo móvel. Quando você recarrega, ele diz, módulo de países de condição Parede. Vamos ver o que temos aqui. No rodapé, temos o códon. Vamos voltar ao rodapé e rolar até o topo. Estamos importando códon de códon . Dê uma olhada. Temos que tirar o trenó. Agora funciona. Aparafuse. Tudo bem. Linda. Você pode ver o título? Temos o serviço, a política da Copanent, o link útil e as políticas legais Se você observar com seus olhos de engenharia, perceberá que o espaço entre cada item é extremamente pequeno Vamos corrigir isso rapidamente. Tudo bem. Vamos voltar ao acordeão Feche o Explorer. Acho que temos que estilizar a etiqueta H two. Vamos dar o nome da classe. Texto d dois Excel. Vamos ampliá-lo. A fonte ficará semi negrito Tudo bem. Vamos economizar e ver. Tudo bem, eu amo a cor do teste e sua aparência. Vamos reduzir rapidamente o espaço entre os itens H. Então, o que vou fazer agora é mudar a parte superior acolchoada e a parte inferior Vamos reduzi-lo. Vamos fazer isso também. Quando você economiza. Tudo bem. Acho que isso é melhor o suficiente. Sim, eu amo isso. Confira em outro dispositivo. Bom. Dê uma olhada. Parece bom. O que fazemos agora? Aqui, vamos ter um D, dê a ele um nome de classe. BG, vamos dar a cor de fundo. Teremos exatamente a mesma cor de cabelo, policial de alta luminosidade. Então, pista. A altura será oito. A largura será oito. Vamos fazer com que ele seja exibido de forma flexível justifique o conteúdo Alinhe os itens ao centro. Em seguida, vamos fazer com que as bordas sejam arredondadas. Então, vamos torná-lo totalmente arredondado. Queremos que seja circulado. Feito isso, vamos copiar o X VG e colá-lo aqui Abra o recurso de código dot MD. Copie o acordeão SVG. Volte para o código, cole-o, salve e certifique-se de formatar. Confira no navegador. Parece muito bom. Mas temos que mudar a cor para que fique mais visível. Vamos dar a ela um nome de classe. Aqui, vamos fazer W six. Agora estamos estilizando o ícone em si. A largura do ícone será seis, a altura será seis textos brancos. Confira. Agora, você pode ver? Linda. Eu amo o que estou dizendo. Vamos continuar. Quando clicamos nesse item, queremos girar o ícone Deixe-me te mostrar rapidamente. Então, dentro da classe agora, temos que considerar a interpolação de strings porque estamos esperando o script Java para que possamos escrever Tudo bem. Agora podemos ter a condição. Se aberto estiver definido como verdadeiro, preste atenção, nada acontecerá. Caso contrário, temos que girar o ícone. Gire menos 90 graus. Quando você vê o resultado, definitivamente entendemos o que fizemos aqui. Agora temos o ícone como este. Sim, vamos implementar rapidamente o clique. Então, onde implementamos o clique agora? Vamos implementá-lo dentro deste D. Clique, vamos chamar o acordeum Togol Seguro. Agora, dê uma olhada. Quando eu clico nesse ícone, ele gira para baixo exatamente em 90 graus Dê uma olhada. Diga-me, não parece bom. Claro que sim. Quando você clica novamente, você gira, você gira, você gira Você também pode clicar para ajustar Tudo funcionando, tudo bem. Eu adoro isso. Isso geralmente é agora para esta palestra. Na próxima aula, exibiremos os itens quando o título for clicado Quando você clica nesse menu, devemos ser capazes de exibir dados relacionados aos serviços. Além disso, quando você clica na política da Copanent, devemos ser capazes de exibir os dados relacionados à da Copanent. Simples assim. Eu falei demais. Nos vemos na próxima palestra. 65. Menu suspenso de rodapé no dispositivo móvel: Olá. Bem-vindo de volta à aula. Nesta palestra, vamos implementar o menu suspenso Para isso, vamos usar a interface sem cabeçalho. Acesse rapidamente headless.com e role um pouco para baixo Aqui você verá o comando de instalação. Certifique-se de destacar e copiar, volte para o código FS. Abra o terminal. Certifique-se de clicar no terminal e, em seguida, fazer contra C para interromper o servidor atualmente em execução. Agora vamos listar o comando para instalar a interface sem cabeçalho Pressione a tecla enter para ativá-la. Instalação bem-sucedida. Vamos derrubar o terminal. Aparafuse na parte superior. Por favor, ainda estamos dentro do códon. Agora vamos aos potes, dê uma olhada. Devemos separar as coisas. R: Vamos importar uma transação da interface de usuário sem cabeçalho. Feito isso, role para baixo e, em seguida, onde vamos implementá-lo agora? Logo após esse d, deixe-me mostrar logo após esse D, onde implementamos ao clicar. Vamos renderizar a transação. Vamos fazer algumas configurações dentro da transsucção Mas antes de fazermos isso, vamos renderizar rapidamente os itens. Abra e feche os colchetes. Dentro dos colchetes co, abra e feche os parênteses e, em seguida, vamos pegar R configurá-lo para uma função Agora vamos ter um d, dando o nome da classe. O padrão do d, vamos fazer com que seja quatro, o BG para ensinar empalidece. O BG será amarelo 500 para ensinar roxos, feche-o. Vamos pegar e atribuir. Dentro do D, vamos fazer um mapa de pontos de conteúdo. Temos que mapear o conteúdo para que ele seja exibido na tela. Obviamente, você deve conhecer outros processos envolvidos. Agora, pegando itens, que representam cada elemento dentro da matriz. Eu continuo dizendo isso porque eu queria ficar na sua memória. Vamos ter uma etiqueta P rapidamente. Dentro da tag P, vamos exibir o item. Salve as operações, temos que fazer dentro do terminal e do PM Run dev. Vamos ver o que temos. O aplicativo está aberto em hosts locais, 3.000. E agora diz que a transecção é usada, mas falta a propriedade show, que é uma operação booleana que retornará verdadeiro ou Então, o que temos que fazer agora dentro da transação, vamos configurar a propriedade aqui, vamos mostrar Nós vamos configurá-lo também, está aberto. Tudo bem Vamos economizar. Role para baixo. Agora, quando você clica, podemos abrir o menu. Mas não sei por que os itens não estão aparecendo. Temos que voltar e conferir o que fizemos aqui. Aqui está a etiqueta P. Mapa de pontos do conteúdo. Vamos ver. Sim, temos o conteúdo lá. O que é de novo? Tudo bem, pessoal, vocês sabem que estamos devolvendo vocês aqui. Eu sempre digo para você não cometer esse erro. Mas agora parece que somos todos vítimas. Ok. Aqui, temos um parentense e não um colchete Certifique-se de abrir os parênteses aqui e fechá-los. Salve e vamos ver. Linda. Você pode ver? Dê uma olhada. Isso é incrível. Eu adoro isso. Agora me sinto aliviada Você pode ver? Agora eu me sinto bem. Vamos implementar algumas propriedades na transação para torná-la mais bonita. Vá para a cabeça L UI. No canto inferior esquerdo da tela, você verá a transação Clique para abrir. O que vou fazer é copiar todas as propriedades aqui. Clique com R em Copiar. Venha aqui Na transação, cole e salve. Tenho certeza de formatar o código. Agora vamos dar uma olhada novamente. Um melhor. Você vê a animação? Dê uma olhada. Tudo legal. Vamos estilizar rapidamente a tag P. P Y um. O texto, vamos torná-lo cinza. Texto cinza, 500. Vamos fazer 400 porque o cinza será dois du e é 500, mas certo. Agora temos o valor real. A fonte parece boa. Seguro. Tockle novamente. Perfeito. Mas agora temos que remover as cores do fundo porque eu as usei fins de ensino , para que você entenda bem o que você entenda bem o que A cor de fundo deve ser exatamente a mesma coisa com todas essas coisas aqui. Destaque a cópia. Venha aqui Colar. Opa, embrulhe em um colchete. Eu não gosto do fundo do menu. Acho que devemos usar o fundo do rodapé do menu para que ele possa se misturar Tudo bem Abra rapidamente o rodapé Onde temos o plano de fundo para o rodapé. Aqui está. Temos que copiar esse plano de fundo, destacar a cópia na seção de rodapé nas linhas 52 Quando você vem aqui, só temos que substituí-lo. A mesma coisa aqui. Também temos que substituí-lo. Está bem? Quando você economiza, vamos ver o que temos. Agora, lindo. Você pode ver o quão bonito isso parece? Extremamente bonito. Dê uma olhada. Isso é de primeira qualidade. Acho que terminamos. Nós terminamos. De fato, terminamos. Então, vamos dar uma olhada no iPod. Perfeito. Tudo legal. Então, isso é oferecer um oleiro, e espero que você ame o design Certifique-se de ler e revisar as pontuações. Isso significa muito para mim. Sim? 66. Design de cabeçalho de página de contato: Olá. Bem-vindo de volta à aula. Nesta seção da causa. Prosseguiremos com a página de contato comigo. Rapidamente, dentro do diretório da página. Clique com o botão direito em Nova pasta, e isso será chamado de Contato. Ganhe o diretório Fale comigo, clique com o botão direito, novo. Nós vamos ter as páginas. Linda. Agora, dentro da página, temos o contato comigo e o design detalhado do portfólio. Será muito bom se seguirmos os princípios básicos da criação de um site profissional, que implica que devemos renomear a página com duas páginas Deveria ser uma palavra pleura. Não se preocupe com isso por enquanto. Nós faríamos isso no final do curso. Páginas de contato comigo. Feche o explorador, RFC, para gerar componentes funcionais de reação Vamos fazer a página de contato. Abra o componente explorer e, em seguida, abra o cabeçalho, header dot js. Role para baixo rapidamente. Dentro dessa tag LI, o que vamos fazer é acessar a página de contato comigo. Na próxima declaração, sempre que um pacote é criado dentro da página do diretório, que é o cara, esse diretório automaticamente se torna uma rota Por enquanto, podemos dizer que o contato comigo é uma rota porque a página ele é criada dentro do diretório fale comigo, e o diretório fale comigo é criado dentro da página. Deixe-me fazer isso mais uma vez. Na próxima declaração, sempre que você criar uma pasta dentro do diretório da página, essa pasta se tornará automaticamente uma rota quando um ponto s da página for criado dentro Simples e curto. Agora, o que vamos fazer é segmentar a página e entrar em contato comigo. Deixe-me te mostrar rapidamente. E acho que você definitivamente entenderá isso quando o implementarmos. Vou fazer o slash page slash, entre em contato comigo assim Quando você salvar, vamos dar uma olhada no navegador. Certifique-se de recarregar. Vamos tentar clicando no botão Hyam Você pode ver? Agora conseguimos abrir a página de contato comigo. Deixe-me limpar seu cachorro. Volte para as páginas de código. No DP, teremos uma etiqueta Hage One. uma tag na cabeça, vamos copiar esse teste. Desculpe, temos que cortar e depois colar. Dê o nome da classe. Vamos usar um vento de cauda e eu vou fazer o texto sete do Excel. Isso fará com que o texto fique muito grande. Agora você tem o texto no canto superior esquerdo da tela. Eu também tenho que limpar sua curiosidade. Vamos ter uma tela flexível. Justifique o conteúdo para centralizar e alinhe os itens ao centro. Isso é apenas para fins de ensino, e aqui está a página de contato comigo. Parece bom. Não precisamos de nenhum dos materiais aqui. Destaque, limpe e comande B para fechar o explorador. Aqui, vamos ser um pouco rápidos para que possamos acompanhar o que temos para esta palestra Vá em frente e escreva um lindo comentário se você gosta da maneira como eu ensino. Teremos um fragmento de reação. Você pode usar os fragmentos vazios, se desejar. Eles são todos iguais, só que os fragmentos de reação podem aceitar alguns adereços. Sim. Acho que essa é a diferença. Aqui vamos dar um mergulho. Dê o nome da classe. Teremos o dv para exibir flex. A direção da flexão é a coluna. Vamos alinhar os itens ao centro. Além disso, justifique o conteúdo para centralizar. W, parte superior totalmente acolchoada, 80 px. Parte inferior acolchoada. Além disso, vamos fazer com que seja 80 pix Vamos fazer a margem superior, F vamos ter outro D. A mesma coisa aqui. Só precisamos destacá-los daqui, copiar, vir aqui e colar. Não precisamos perder tempo. Vamos especificar o plano de fundo, BG, colchetes abertos e fechados Ganhe os colchetes, vamos pegar o URL Em seguida, abra e feche os parênteses. Ganhe a dobradinha. Vamos fazer slash offices dot JPG. Temos um escritório de imagem. E essa imagem está dentro do diretório público. Eu não preciso mais te levar lá porque você já deveria saber disso. Aqui, vamos fazer a capa do BG. Estamos tentando estilizar a imagem. A propósito, vamos fechar até D. W Full. Vamos dar a altura. Vamos fazer com que seja de 400 pixels. Salve no navegador, aqui está. Perfeito. Está saindo com cuidado. Mais uma coisa que precisamos fazer é alinhar a imagem ao centro, PG center Salve e veja o que temos. Tudo bem. Parece bom. Escreva O nesta definição, vamos criar uma sobreposição de fundo Vamos ter outro df, dê o nome da classe Teremos exatamente a mesma coisa aqui. Destaque a cópia, venha aqui e cole. Sim. Então, a largura será a mesma. A altura total, o fundo, permaneceremos consistentes com o fundo escuro que estamos usando 223.740 O que vamos fazer agora é fazer slash, que é dividido por 70 Queremos reduzir a espessura do plano de fundo. Quando você economiza, desculpe, temos que fechar os dentes, economizar e ver o que temos. Agora nós temos isso. Se eu remover o 70 assim, você pode ver, vai ficar assim, algo como opaco Mas se você quiser que seja transparente, basta dividir por 70 ou você pode dividi-lo por qualquer valor de sua escolha para dar a aparência transparente que você realmente deseja ter. O meu é assim. Estou satisfeito com isso. Vamos aplicar o brilho. Brilho do pano de fundo, brilho. Não, vamos fazer com que seja 50. Acho que foi quando você viu. Agradável. Coloque este d, nós vamos ter outro d. Colocar uma interface de usuário é d. Testar o centro de alinhamento. BG, queremos dar a isso o pano de fundo. Obviamente, vamos nos manter consistentes com o plano de fundo. 48, AFD E, PY, um pixel, Px, oito pixels Trilha e branco. Teremos que transformar nossa letra por caixa, a fonte ficará em negrito Texto de 20 pixels. Texto branco para a cor, e queremos que os planos de fundo sejam arredondados G. Dentro do D. Posso vê-lo agora OK. Acho que devo aumentar um pouco a frente . Você gosta desse jeito? Isso é uma pena e vai esconder quase tudo. Vamos continuar assim. Então, o que é de novo? Vamos dar uma olhada. Você pode não ver nada no navegador até exibirmos algo entre o d. Então, vamos ter uma tag a aqui. Com a etiqueta A, vamos fazer um formulário de contato. Quando você salva, aqui está. Essa é exatamente a expectativa. Colocando a parte superior e a parte inferior, vamos fazer com que sejam cinco pixels. Eu acho que está tudo bem. Então, vamos fazer esses dez pixels. Tudo bem, lindo. Vamos fazer o mesmo com o HREF, entre em contato. Quando clicamos nessa tag A, que neste caso, aparece aqui, ela vai rolar suavemente até o formulário de contato. Sim. O que vai fazer agora? Vamos dar o nome da classe. Vamos fazer com que seja pop. Linda. O que mais temos que fazer agora? Depois desse mergulho, teremos outro desenvolvimento. A margem superior da borda será de dez pixels. Win, vamos ter uma etiqueta Hight One. Lembre-se de que estamos sendo consistentes com o telefone. Aqui vamos ter as fontes a serem lembradas no quadro. O texto d five se destaca. Novamente, o texto do texto, por exemplo, da mesma cor. Vou apenas destacar a cópia e depois substituí-la. Pan vai fazer dois anos. Vamos testar o alinhamento ao centro. Isso é para o espaçamento posterior. Ganhe uma etiqueta de cabeça, eu vou fazer isso e você me salva. Tudo bem. Aqui está. Nós entendemos. Bom. Depois desse DF, teremos outro D, dê a ele o nome da classe Vamos fazer alguma coisa. Agora vamos ter uma etiqueta P. Ganhe a tag P, basta copiar a gravação e depois colá-la entre elas. Dentro do código resource.md, temos que copiar a redação Destaque e copie, volte e cole. Formate o código. Salve no navegador e aqui. Vamos estilizar rapidamente a tag P. Primeiro, vamos esterilizar as profundezas. Vamos ter display flex, justificar o conteúdo para Vamos ter uma linha de teste, no centro. Margem entre os dez primeiros. Em dispositivos médios, queremos a largura 700 pius e s. Coloque a tag p rapidamente e dê a ela um nome de classe Texto branco. A fonte que vamos fazer dela é 300, que é a fonte com. Em seguida, centralize o texto do Excel. Tendo feito isso quando você vê, Beautiful. Esse é exatamente o resultado esperado. Eu adoro isso. Está lindo. Depois de fazer isso, vamos dar olhada rápida em um dispositivo móvel. Você pode ver? Bom. Perfeito. 67. Cartão de menu de página de contato: Na palestra anterior, criamos o cabeçalho fale comigo Nesta palestra, prosseguiremos com as cartas, o código de Hao, logo após esse d, o d acima da Esse cara. Teremos outro d. Padding à esquerda e à direita, 20 pix Dentro, teremos um d, forneça o nome da classe. Em um dispositivo menor, teremos uma tela flexível, a GAP de 20 pixels, GAP de 20 pixels, margem superior a 50 pixels A largura máxima da largura real será total, que é 100%, e a altura também é 100%. E no dos de, vamos formatar rapidamente o código. Nós temos isso assim. Agora vamos ter outra definição. Vamos fazer com que seja flexível. A direção da flexão é a coluna. Então vamos fazer flex. Um dispositivo extra grande, a direção de flexão será rolar Vamos dar a palavra. 20 pixels. Estamos tentando criar as caixas. Nós vamos ter outro dv. PY, 35 escolhas, P X 45 escolhas. Arredondado d G porque queremos que as bordas dos cantos das caixas sejam um pouco curvas A sombra, G, o custo, vamos torná-la um ponteiro. Eu quero que seja transacionado, pessoal. Eles transformam a duração Bash 300. No Hova, quando você passa o mouse sobre o cartão, vamos mudar o plano de fundo. Sim. Será o plano de fundo real do Hova que estamos usando Eu te disse que é preciso permanecer consistente ao criar um site profissional. Também queremos mudar o texto do Hova. Também em Hova. Queremos traduzir Y. Vamos tê-lo. A cor de fundo real do sard será B, branco. Eu quero te mostrar para que você possa vê-lo c. Agora nós o temos. Tudo bem. Vamos aplicar rapidamente a sombra da caixa nela. Abra rapidamente o recurso de código dot MD e, em seguida, copie essa sombra da caixa. Feito isso, volte ao código e cole-o dentro do D. Vamos colá-lo aqui. Então, quando você verifica o navegador, e aqui está. E quando você passa o mouse sobre ele, o fundo aparece. A próxima linha é exibir o conteúdo dentro do d ou dentro do cartão, por assim dizer. Mas eu quero que você note que quando eu movo, isso se traduz para baixo Dê uma olhada. Esse não é o resultado esperado. Deve ser traduzido para cima e não para baixo. Volte para o código em que implementamos o hover. Aqui, acho que temos que especificar um valor negativo como esse. Fizemos isso anteriormente. Mais uma vez, dê uma olhada. Tudo bem. Tudo bem. Que diabos, vamos ter outra div. Faça com que ele seja exibido de forma flexível como centro de itens alinhados. A diferença, vamos fazer com que seja 15. Podemos escolher aqui. Vamos fazer com que seja 16. Não, vamos especificar uma lacuna personalizada. 15 pixels serão bons para isso. W no D, temos que exibir o ícone para continuar com os ícones. Primeiro, precisamos instalar o ícone de reação. Clique na contagem C do terminal para interromper o servidor atualmente em execução Vou fazer o MPM install react icons. Pressione a tecla enter para disparar. Instalado, com sucesso. Novamente, eu só preciso iniciar o servidor. Vamos reduzir isso um pouco. Tudo bem. Não instalei o ícone de reação. A linha de aninhamento serve para importar os ícones necessários. Novamente, volte para o ponto de resultado do código MD. Não há necessidade do horário ocidental para digitar todos os topos. Você só precisa destacar os ícones de reação da caixa Fale comigo. Aqui estão as, das linhas 8472 850. Copie, volte para o código e, em seguida, vá até o topo. Aqui, só temos que colar. Esses são os ícones. Deixe-me mostrar esse cara, a localização do F A, o telefonema do FI e o resto deles. Então, aqui vamos renderizar o ponto de localização F. Feche-o com a etiqueta de fechamento do surf e vamos estilizá-lo rapidamente O tamanho, vamos fazer com que seja 40. P, isso deve ser um colchete Cole, 40. Quanto mais frio, também precisamos manter a consistência 48, AFE. O que está errado? Opa, Desculpe, isso tem que ser feito no duplo ou no single Quando você verifica o navegador, aqui está. Parece bom. Rápido. Vamos continuar. Logo depois disso, esse cara aqui, vamos ter outro D, flex, e então a direção de flexão é coluna Outro, e dentro do desenvolvedor, vamos ter uma tag P, e eu vou fazer a localização, assim. Nós temos isso assim. Bom. O que temos que fazer agora? Vamos rapidamente deixar o mergulho obsoleto. O texto, esse cara, copie, cole. Vamos especificar o tamanho do imposto personalizado de 14 pixels. Tudo bem. Dê uma olhada. Você pode ver? Fique em forma e eu gosto. Nós vamos ter outro d. Dentro do D, vamos ter uma tag p e dentro da tag P, eu vou fazer um anúncio de visitantes. Você precisa especificar seu endereço. Quando você salva, você pode ver, dê uma olhada. As coisas estão gradualmente tomando forma, e eu gosto disso. Dentro do D. Novamente, no painel frontal, vamos torná-lo semi-quente Texto, 20 pixels, faixa em branco, que é o espaço da linha. Linda. Tendo feito isso. Venha aqui, vamos tomar um d. Vamos esquecer. Ganhe o D e destaque este ícone. Pressione a opção K mac e, em seguida, toque na tecla par para movê-la dentro do D. Feito isso. Destaque o d de fechamento e aqui está. Esse cara aqui nas filas. Destaque o d de fechamento nas linhas para cinco e corte-o. Temos que colá-lo aqui. O que simplesmente implica que esse desenvolvimento aqui está terminando aqui. As linhas 40 terminam nas linhas 54. Vamos formatar rapidamente o código para obter os recuos adequados. Agora, quando você verifica o navegador, temos a seguinte aparência, e esse é exatamente o resultado esperado. Logo após este df, deixe-me mostrar a você o desenvolvimento aqui que abordamos há pouco tempo Nós vamos ter outro df. Dentro, teremos uma etiqueta P. Ganhe a etiqueta P. Eu só vou fazer? A propósito, este é apenas um endereço da Domi Sim. Dê rapidamente ao P um nome de classe. Traço de texto Assim mesmo, quem fazer com que fique cinza. Não é ruim, destaca, duplica. Você pode mudar o nome da rua aqui e qualquer outra coisa. Tudo bem. Então, tendo feito isso, o que vamos fazer agora é destacar. Deixe-me te mostrar. Morre aqui, está terminando aqui assim. Dê uma olhada. Termina aqui nas linhas 63. Vamos destacar 38-62. C P, venha aqui. Depois disso. Economize bem. Nós temos isso assim. A próxima linha é sc top. Temos que destacar esse de. Essa parada aqui das sete está terminando aqui nas linhas três. Destaque a partir de 37293, copie e cole. CF formata rapidamente o código. Vamos voltar. Agora temos essa aparência. Extremamente bonito. Confira em um dispositivo móvel. Parece assim. No iPad, é exatamente assim. Você pode ver, tudo está bem alinhado no dispositivo iPad. Tendo feito tudo isso. O próximo na fila é mudar os ícones e a parte superior direita. Está bem? Deixe-me te mostrar. Esta é a primeira caixa aqui. E essa é a segunda caixa. E na segunda caixa, teremos o número de telefone. Então, vou renderizar uma chamada telefônica F. Eu só vou fazer aqui 27 serviços. Aqui eu vou colocar cores. Então você só precisa especificar seu número de telefone aqui. Então, tudo isso você pode fazer do seu lado. Sim. Então, eu vou ter um número de telefone aleatório. Tudo bem. Eu salvo. Agora você tem essa aparência. Bonito e limpo. O que é, novamente, nós temos que fazer? Devo fazer todas as coisas para você? Tudo bem. Deixe-me aguentar a dor. Esse é o terceiro. Aqui vamos exibir o e-mail. Então, eu vou enviar e-mails com IA. Então, o que fazemos aqui? Só vamos deixar uma mensagem. Você pode escrever algo aqui para deixar seu site bonito. Vamos apenas fazer o endereço de e-mail. Tudo isso você pode fazer. Então, aqui, eu vou fazer um teste no Gmail. Você pode usar seu e-mail e, por favor, não use meu e-mail porque este site agora é para você. Por fim, vamos tê-lo por enquanto. Então, os dias da semana em que sua empresa abre. Você conhece todas as paradas. Então, aqui vamos fazer com que a IA descreva o tempo de campo. Claro, aqui temos que especificar o horário de expediente. Vou cumprir o horário de expediente. Especifique sempre que você abre e sempre que fecha. Eu vou fazer o horário de abertura. De segunda a sexta. E então o horário é das 9h às 18h. Então, o horário de fechamento, normalmente, não abrimos Aos domingos, você só precisa ir à igreja ou pode ir à máscara em qualquer lugar que quiser Você pode sair para a festa. E. Quando você está, aqui está o resultado. Parece assim. Eu não gosto desse jeito. Você vê que esse cara aqui está ocupando quase todo o outro espaço. O que devemos fazer para resolver isso. Você pode resolver isso do seu lado, mas para mim, eu só tenho que reduzir porque esse e-mail não é válido. Não é necessário ter um e-mail longo dentro da pilha que está obstruindo Outra forma de resolver isso é especificar o tamanho do telefone. Não precisa exceder uma certa quantidade de espaço. OK. Agora parece assim e eu gosto. Sim, isso é bom. Mãe, hmm. Isso é legal para mim. A propósito, dê uma olhada nos efeitos de foco. Está lindo. Oh, meu Deus. Vamos dar uma olhada em dispositivo móvel, desculpe, no iPad. Dê uma olhada. Gente, esse design é de primeira qualidade. Olha isso. Você pode ver? Faz sentido. Tudo bem. Chega disso. Vamos prosseguir para a próxima palestra onde criaremos o formulário de contato Te vejo então. 68. Layout de formulário de contato: Ele está lá. Bem-vindo de volta à aula. Nesta palestra, vamos prosseguir com o layout de contato comigo Rapidamente, volte ao código VS. Logo após esse d. Deixa eu te mostrar, qual é o mergulho até aqui. Agora vamos começar uma nova seção. Teremos um desenvolvedor com o nome da classe e, em seguida, teremos um display flex Enquanto isso, vamos fechar o d. Não será isso d, temos que especificar o ID desse d. ID igual, aperte na parte superior e deixe-me mostrar para você. Esse cara aqui. Lembre-se de que eu disse que quando você clica nesta etiqueta A, queremos alisar o parafuso na seção de contato comigo. Portanto, temos que destacar e copiar esse ID. Contato. E depois cole aqui. Deus. A direção da flexão é coluna. Em um dispositivo extra grande, queremos flexionar o rolo Justifique o conteúdo no centro, a lacuna, 60 pixels, Miging top e depois Pix Miging top e depois Pix Coloque à esquerda e parcialmente à direita, pixels. Max com scrot até o topo e deixe-me te mostrar. Temos que permanecer consistentes com a largura máxima aqui. Acho que especificamos a largura máxima aqui. Max com, onde você está? Aqui está a largura máxima. Eu só tenho que destacar e copiar. Venha aqui e cole. Mm ou dois, o que é margem. O preenchimento é dez. Dentro do dF, teremos um df, dê a ele o nome da classe Em um dispositivo menor, vamos aquecê-lo. Dispositivo médio, vamos fazer com que ele bloqueie a exibição. Em seguida, posicione relativa, W, 50% no Excel W, 50%. H 550 pixels. Vamos fazer com que seja um Excel arredondado. Em um dispositivo médio, a largura será total. Em um dispositivo grande, a largura também será de 50%. Agora, o que devemos fazer é especificar a imagem. O que eu vou fazer, agora vamos usar o estilo embutido Dentro, teremos a imagem de fundo. Especifique a barra. Ganhe o bad tick. Eu vou fazer UR Well, abrindo de perto. O que vou fazer é cortar o JPEG de sete pontos no servidor do cliente. Ao salvar, vamos ver se a imagem aparece. Bom. Agora temos a imagem assim. Como você pode ver, os cantos são todos arredondados. Bom. Volte. O que devemos fazer agora é centralizar a imagem. Podemos usar a classe utilitária de vento traseiro. PG center, e também PG CV. Você pode ver, agora parece muito bem. Bom. Feito isso, também precisamos criar a sobreposição do plano de fundo para que fique transparente Agora, o d não o fecharia, formataria rapidamente o código e dentro do nome da classe Vamos posicioná-lo de forma absoluta para que fique em cima do Steve Agora, esse dispositivo está posicionado em relação. Quando posicionamos esse cara de forma absoluta, ele vai ficar em cima do cara. Eu sei que você sabe disso. H f com um grande gradiente até o topo. Isso criará o fundo gradiente de baixo para cima Então vamos obtê-lo de. Agora temos que especificar a cor para começar com 22, três, 740 Através da mesma cor aqui. Só tenho que destacar esse cara, copiar e colar. Shadow entra correndo. Agora, a opacidade, vamos torná-la 70. Quando você vê no navegador. Isso não funcionou. Por que o material não está funcionando? A opacidade é de 70 anos, fará com que seja tá A coisa da Sombra Nova aqui é louca. Oh, meu Deus. Dê uma olhada. Absoluto. Não. O que foi isso? Essa é a coisa certa. Alta cheia com cheia, e agora você vai tê-la assim Linda. Tudo bem, então dê uma olhada. Esse é o dia de encerramento, certo? Não temos nada dentro do mergulho. Nós apenas o usamos como uma sobreposição de fundo. Então, vamos fazer outro mergulho fora do mergulho. Está bem? Espero que você esteja seguindo. Novamente, teremos sua posição absoluta. No set zero. Vamos fazer com que seja exibido de forma flexível. A direção da flexão é a coluna. A lacuna, vamos fazer com que seja de 20 pixels. Os itens se alinham ao centro. Justifique o conteúdo para centralizar. O texto será branco. Shadow será todo g, e o padrão será seis. W no d, teremos outro d. O texto será para o Excel. Um dispositivo extra atrasado, com a margem superior. Vamos fazer 150 pix. O topo da margem será zero, arredondado por completo. Então, queremos que seja protegido aqui. Você verá isso em um GV. P X 15 pixels, PY, 15 pixels. E o plano de fundo. Vamos ser consistentes com esse BG. Vamos usar esse plano de fundo aqui. Se não fizer sentido, nós o substituiremos. OK. Texto dentro, o texto será branco. Então, vamos exibir o ícone para que possamos ver o que temos. Lembre-se de que o importamos na aula anterior. Sim, copiamos a importação do recurso de código e a colamos aqui Quero que todos acompanhem, e é por isso que dedico tempo explicando tudo. E espero que você recompense meu trabalho e escreva um comentário maravilhoso Isso será muito apreciado. Tudo bem. Eu falei demais. Fone de ouvido F A. Feche com a etiqueta de fechamento suave. Agora vamos ver o que temos. Estrondo. Você pode ver que aparece aqui? Não se preocupe, quando começarmos a implementar os itens abaixo desse cara, isso vai aumentar Então, logo após esse desenvolvimento, teremos outro dv Fontes em negrito. Dia do texto, 24 pixels. E eu vou fazer isso com a vida. Você pode fazer outra coisa. Aqui está. Converse com a vida. Fora do D, teremos outro D. Dê o nome da classe. Win, vamos ter uma etiqueta P. Dentro da tag P, só temos que errar. Vamos destacar a cópia do texto. Cole-o dentro. Formate rapidamente o código. Quando você salva, e aqui está. Bom. A fonte não parece boa, não se preocupe, com certeza vamos corrigir isso. O que eu quero chamar sua atenção é esse cara aqui. Às vezes, sempre que você formata seu código com PD, isso aparece. Então eu não quero que você fique curioso sobre isso. Vamos estilizar rapidamente a tag P. Não muito além de especificar o texto e o resto deles. Centro de texto. Margem entre os cinco primeiros. Fonte. Vamos fazer com que seja 200 apa o peso da fonte. Texto Excel. Não acho que seja necessário que o rígido tenha um nome de classe Agora parece assim, e parece mais bonito, mais alto. Tudo está funcionando bem e tudo bem. Feito isso, vamos implementar o botão abaixo. Logo após a definição de encerramento. Também não precisamos de um nome de classe aqui. Aqui, vamos passear de barco e, dentro do barco, vou fazer menos conversas E aqui está. Tudo bem. Vamos começar rapidamente. O plano de fundo, então, devemos usar o BG, destacar a cópia, vir aqui e colocar. Texto. Margem inferior de 30 pix Colocar esquerda e direita é quatro. Colocar a parte superior e dar tapinhas na parte inferior são dois. mouse, passar o mouse, também devemos permanecer consistentes com a cor real do mouse Não sei se podemos colocá-lo no topo aqui, dentro do c. Dê uma olhada. Aqui está. C P, substitua-o aqui. Cor de transição e queremos que o botão seja um pouco arredondado. Vamos ver o que temos. Quando você economiza. Oh, lindo. Dê uma olhada. Veja isso. Parece bom, e eu gosto. Tudo bem. Feito isso, teremos uma parte superior direita à direita desta carta. Depois desse d, teremos outro D. Vamos ter um display flex A direção da flexão é a coluna. Lacuna. Nós vamos para a operação. Deve ser lacuna e grupo. 20 fotos. Outro. Dentro do desenvolvedor, vou fazer contatores. Fora do D, teremos uma etiqueta P. Também temos que encapsular a tag p dentro da tag D. Destaque a tag P e, em seguida, insira-a. Você já sabe como fazer isso. Na tag P, vou colar o direito aqui, solicitar a devolução do núcleo, sinta-se à vontade para entrar em contato conosco. Não precisamos digitar isso. OK. Agora, aqui está à direita da esquina. Não gosto da aparência, então temos que dar um pouco de estrela. Vamos estilizá-lo rapidamente. A partir do contato. O D aqui, teremos um centro de texto, W. 100 pixels, que é a largura do PG. Então, aqui como pano de fundo, vou usar o PG red 500. Então, essa é, na verdade, minha especificação, porque eu quero que ela seja perceptível. Deixe-me te mostrar. Você pode ver? Sim. Portanto, se você não gostar da cor, também pode alterá-la no final. P Y, o espaçamento entre linhas. Vamos fazer com que seja transformado por caso. A fonte d 300, fonte Sans, texto de 14 pixels O texto é branco e, em seguida, o redondo é LG. Salvar Você consegue ver isso? Parece bom assim. Feito isso, também precisamos estilizar a tag P. Para a tag P, não precisamos fazer isso. Então, vamos te dar o nome da classe. Texto de 30 pix. Texto, essa cor aqui, destaque a cópia. E peça. Quando você economiza e explode. Perfeito. Essa é exatamente a expectativa. Tudo bem, nosso layout está pronto, e a próxima linha é comprar o formulário de contato aqui. Logo após a etiqueta de velocidade. Vamos ter o formulário de contato aqui. E tudo parece bom. Claro, parece bom. Isso é lindo. Eu continuo admirando esse design. Honestamente falando, o design é de primeira qualidade. Dê uma olhada. Tudo bem, chega disso. Nos vemos na próxima palestra. 69. Formulário de contato: O design já está muito bonito. Então, vamos finalizá-lo rapidamente nesta palestra. Nesta palestra, basicamente, vamos configurar o formulário de contato Teremos o campo de nome, e-mail, número de telefone, assunto e o campo de mensagem. Vamos continuar com isso. Logo após esse df. Nós vamos ter um formulário. Dê ao formulário um nome de classe. Vamos fazer com que ele seja exibido de forma flexível, direção da flexão é A lacuna de 20 pixels. Se você observar com atenção, perceberá que temos mantido exatamente essa mesma lacuna. Ensinando o conceito e os princípios de um site profissional. Você sempre precisa ser consistente com a fonte, o tamanho da camiseta e tudo isso, inclusive o seu. Agora vamos ter um div com o nome da classe. Vamos usar a interpolação de strings. Vamos ter uma tela flexível. direção flexível é a coluna em um dispositivo menor, direção flexível é Novamente, a lacuna, 20 pixels. Ganhe o CD, vamos encontrar o nome da classe. Lembre-se de que importamos o Google Hind. Opa Nós não o importamos. Sério? Vamos fazer isso rapidamente. Dentro do recurso de código, você pode copiar rapidamente a importação. Cole assim. Tudo bem. Role para baixo. Nós o temos aqui. Vamos fechar a taxa. Onde no desenvolvimento, teremos um campo de imputação. O tipo vai ser textos. Vamos fazer assim. Primeiro de tudo, vamos fechá-lo com a etiqueta de fechamento suave. Tudo bem. Nome Nome. Coloque em seu nome, e isso será obrigatório. É uma forma de validar o formulário de forma muito rápida. Não precisamos fazer todas as coisas. Dê o nome da classe Px, 12 pixels, o contorno Arredondado, MD, P Y. Novamente, 12 pix Flex Dash One, Bg cinza 200. Não com isso. A próxima linha é destacar o campo imp e duplicá-lo Quando você salva, vamos ver o que temos no navegador. Tudo bem. Agora temos isso assim. Seu nome, seu nome. Não há espaço entre eles. Vamos voltar ao código. Primeiro, temos que alterar algumas das propriedades. Aqui, vamos enviar um e-mail. E, claro, o tipo de venda será e-mail. Novamente, no espaço reservado, vamos fazer seu e-mail. Ok, seu nome e seu e-mail. Mas olha, estamos tendo esse problema. Não há espaço entre o campo. Vamos examinar rapidamente o código. Aqui temos display flex, coluna de direção flexível. Em um dispositivo menor, direção da flexão é a linha E dê uma olhada. A lacuna e aqui. Tudo bem. Bom. Tudo legal. A próxima linha final é destacar. Deixe-me mostrar a você de 1932 a 208. Duplique-o uma vez. Então, no navegador, aqui está. Vamos mudar rapidamente as propriedades. O tipo de impute será testado, mas o nome será número de telefone Seu número, e isso será para o assunto. Mude o nome para assunto. Tudo bem. Parece bom. Eu gosto disso. O que devemos fazer a seguir é implementar a área de texto. Logo após esse d, teremos outro df, e basicamente o que devemos fazer aqui é apenas a diversão Eu vou fazer a área de texto. Feche-o com a etiqueta de fechamento automático. Vamos fazer com que seja necessário. A mensagem do nome. Por favor, espere. Vamos fazer sua mensagem. Forneça rapidamente o nome da classe e será exatamente a mesma coisa com isso. High Light, ligue para P, venha aqui. pasta é exatamente a mesma, mas algo mudou, que é a altura. Vamos fazer com que seja de 180 pix para a área de texto. Bom. A altura parece boa e eu gosto. Também precisamos especificar a largura, então vamos fazer com Take a look completo. Tudo bem. Tudo faz sentido. Vamos implementar rapidamente a navegação. Para a inicialização, logo após esse df, teremos outro Nós vamos fazer uma votação. E eu vou nos enviar uma mensagem. Ou você pode fazer algo melhor internamente. Se você tem um inglês melhor para falar, pode vê-lo aqui. Não é crime. Agora aparece aqui. Vamos remover o estilo aqui para o D. Em vez disso, temos que fazer isso na inicialização O plano de fundo, vamos manter exatamente o mesmo plano de fundo que estamos usando. Copie aqui nas linhas 176. Volte e cole aqui. A largura d cai. Em dispositivos menores, a largura é automática. Px 30 pixels. Py, 12 pixels. Ao passar o mouse, acho que devemos copiar o efeito hov daqui Aqui está. Vai ser exatamente a mesma coisa. Cópia das linhas 17, seis, venha aqui. Em seguida, cole. A transação será colorida. A duração 300 g, semi bode. Devemos mudar a cor do texto para branco e, em seguida, fazer com que os cantos do botin sejam arredondados Rápido, vamos fazer isso. Vou fazer G arredondado , texto e isso é tudo. Bom. Linda. Isso é clássico. Tudo bem. Algo que eu também quero mostrar para você, vá até o topo. Lembre-se de que implementamos a rolagem suave dentro dessa tag. Então, quando eu clico e estouro, você consegue ver? Perfeito. Vamos dar uma olhada em um dispositivo móvel. Role para baixo. Dê uma olhada. Amigos, isso é clássico. Extremamente responsivo em nossas plataformas. Eu posso te dizer isso em termos gerais. Se você observar cuidadosamente com seus olhos de engenharia, perceberá que o espaço entre o formulário de contato e o rodapé está mesclado O espaço aqui. Mamãe, hmm. Mesmo em dispositivos grandes. Você pode ver que isso meio que faz com que pareça vazio. Então, vamos voltar rapidamente ao código. Agora, role. Para cima. Este é o conteúdo de um ID da seção de contato. O que vou fazer agora é especificar a margem inferior e B. Vamos torná-la menos 150 pixels Quando você vê, bom. Vamos fazer com que seja 160. Espero que não esteja muito perto. Eu acho que é legal. Está tudo bem assim. Agora terminamos o design. A próxima linha final é convertê-la em um impute controlado para que possamos pegar o que o usuário digitar no campo de impute Eu sei que você entende do que estou falando. Vamos fazer isso na próxima palestra. 70. Entrada controlada (formulário de contato): Agora temos um design muito bonito, mas o formulário de contato não está funcionando. Ele não será atualizado quando você digitar algo nos campos de impute Para que o formulário de contato funcione, precisamos convertê-lo em um impute controlado Ele pegou o código Vs , vá até o topo. A primeira coisa que vamos fazer aqui é importar o gancho usted. Vamos fazer isso online também. Eu não fiz isso. Também precisamos mudar da renderização do lado do servidor para a renderização do lado do cliente porque agora estamos usando gancho do estado U e definitivamente, usaremos o clique Então, aqui, vamos fazer um cliente. E agora vamos continuar. Vamos declarar rapidamente a variável de estado necessária para o imputado Const state, dito estado. Então vamos fazer estados iguais. O estado inicial será um objeto com propriedades. Você só precisa abrir e fechar um colchete co dentro da função de estado Para o primeiro campo, temos nome, e-mail, número, assunto e mensagem. Rapidamente, vamos definir o nome para uma string vazia. C e depois destaque, duplique quatro vezes. Agora vamos substituir isso por e-mail, e esse será o número de telefone. Esses assuntos. Por fim, temos a mensagem. Tudo bem Linda. Antes de prosseguirmos, vamos fazer alguma coisa rapidamente. Vamos ter outra variável de estado. Definitivamente, vamos usá-lo no futuro, então vamos fazer isso aqui. Vamos chamá-lo de carregamento, definir carregamento dois Vamos configurá-lo para forçar. Simples assim. Deixe-me explicar a lógica. Quando o usuário começar a digitar no campo de imputação, essa ação acionará uma data Quando a data acontece, temos que fazer o teste, ensinando bem. Linda. Vamos ter a função de lidar com a mudança. Const handle change, equal, configure-a para uma função de seta Usando o parâmetro dessa função, vamos ver o evento. E aqui, eu vou fazer const key equ event dot Só temos que destacar, duplicar. Aqui vamos ter valor. Vamos fazer eventos com o valor do ponto alvo. Basicamente, o que estamos tentando fazer é pegar o teste dentro do campo de impute quando o usuário está digitando Aqui. Feito isso, precisamos atualizar o estado definido estado, dentro do parâmetro. Vamos ter um objeto e, dentro dele, vamos espalhar o estado, vamos pegar a chave. Valor da coluna. Simples assim. Tendo feito isso, as próximas dez linhas. É óbvio que não queremos aceitar nenhuma carta no campo do telefone. A única coisa que queremos é o número. Vamos validá-lo rapidamente. Depois dessa função, teremos outra função. Cs e troca de telefone. E aqua Definitivamente, temos que assistir ao evento e depois deixar eu aumentar meu ritmo agora. Então, teremos um valor de custo igual ao valor do ponto alvo Agora terminamos de obter o valor. A linha neton é usar as expressões regulares para validar o fd Então, eu vou fazer aqui o custo. Valor numérico equ value dot replace. Dentro da função de substituição, temos que realizar as operações aqui. Teremos duas barras para frente e, dentro, teremos o colchete O que queremos é 0-9 mais simples do que isso. Você deve saber todas as coisas. Isso é apenas uma coisa básica do script Java defina estados dentro dos estados definidos, distribua o número de telefone do estado atribua a ele um valor numérico de propriedade Simples assim. Bom. Por fim, quando o usuário clica para enviar o telefone, queremos atualizar a disputa Por exemplo, depois de digitar dentro do feud e clicar no botão de envio, se tudo estiver bem, queremos eliminar o fd. Sei que você entende do que estou falando Vamos fazer isso rapidamente. Custo clastic equa. Então, dentro desse objeto, vamos chamar a função seta para atualizar o estado dentro da função estado dentro da O que vou fazer agora, vá até o topo. Temos que destacar tudo daqui , das linhas 19 a 23. Copie porque queremos voltar ao estado padrão. Esse é o estado padrão, nada intermediário. São todas cordas vazias. Formate o código para obter os recuos adequados. Agora terminamos de configurar as funções e tudo o que é necessário. O próximo passo é aplicar essas funções. Então, vamos começar a briga. Está bem? Esse é o formulário. O que devemos fazer agora é implementar a mudança. Vamos fazer isso aqui mesmo. Em mudança. Tudo o que precisamos fazer é chamar a mudança de identificador. A responsabilidade da mudança é atualizar a disputa quando o usuário começar a digitar dentro do impute Agora também temos que definir o valor para indicar o nome do ponto. Lembre-se de que esse é o campo de imputação do nome. Linda. Agora, vamos copiar essas duas linhas de código, destacar e copiar, dentro do campo de impute do e-mail, cole-o aqui Temos que mudar o nome para e-mail porque esse é o campo de e-mail. Para o campo telefone, então temos que colá-lo aqui. Claro, nós copiamos anteriormente. Aqui vai estar o número de telefone do estado, e assim por diante. Assunto do ponto estadual. Por fim, isso é para a mensagem. Vamos fazer isso aqui. Mensagem de ponto de parada. Simples nisso. Confira no navegador. Agora, vamos ver. Tudo está funcionando. Para ter certeza do que fizemos, precisamos registrar o estado no console. Role até o topo. Logo após a função de mudança de alça, vamos fazer o estado de log de pontos do console. Esqueçamos que a troca da alça do telefone deve ser chamada dentro do campo do telefone e não da mudança da alça. Vamos voltar para o campo do telefone. Este é o e-mail. T. Este é o campo do telefone. Não precisamos chamar a mudança de identificador porque a alteração de identificador é para o resto do campo de entrada e não para o campo de telefone. Eu vou lidar com a troca de telefone. Feito isso, ao salvar no navegador, vamos conferir rapidamente o console. Agora, quando começarmos a digitar algo no campo de entrada, você definitivamente experimentará as atualizações e as mudanças. Aqui vai ficar para o nome. Eu vou fazer John. Dê uma olhada no console. Você consegue ver como ele é atualizado? Para o campo de e-mail, vou fazer Can you see the way to update? O Fm feud está funcionando perfeitamente bem. Para o número de telefone, eu só tenho que imputar qualquer coisa, e para o assunto, vou enviar um texto no formato feud. Está andando. Dê uma olhada. De fato, está funcionando. Tudo bem Deixe-me ver. Tudo legal, tudo bem. Que segundo temos que implementar? O campo agrícola está funcionando e está funcionando perfeitamente bem. Por enquanto, está desligado e espero que tenham gostado desta palestra. Nos vemos na próxima palestra. Mantenha o foco e liste os cuidados. 71. API de amilador de nó usando Nextjs13: Olá. Bem-vindo de volta à aula. Nesta seção do curso, prosseguiremos com a criação da API. Rapidamente, o que eu fiz? Vamos começar. Abra o código VS e, por favor, faça de tudo para abrir o explorador. Abra o SRC, que é o diretório de origem Agora, dentro do aplicativo, vamos criar uma pasta chamada EPI Para algumas pessoas, você pode ter o EPI já criado quando geramos a próxima placa de caldeira GS do zero Excluí o meu simplesmente porque vou começar do zero. Se você já tem o diretório EPI dentro da pasta do aplicativo, bom para você Mas se você não tiver, basta clicar na nova pasta do aplicativo, EPI Dentro do diretório da API, vamos criar outro diretório. Tudo bem, clique com o botão direito em Nova pasta e eu a chamarei de Contato. No contato, clique com o botão direito do mouse em Novo arquivo. Novamente, dentro do contato. Clique com o botão direito em Novo arquivo. Vou chamar esses pontos de rota GS, simples do. Antes de prosseguirmos com a criação da API, precisamos instalar os pacotes necessários. Vou fechar o explorador. Comum B para fechá-lo. Clique no terminal. Em seguida, contra C para interromper o servidor atualmente em execução. Vou fazer a instalação do MPM. Espaço pequeno no Node. Também precisamos do ponto EMV, então vou fazer.env, É a tecla enter para ativá-la. Concluído A instalação foi bem-sucedida. Vamos dar uma olhada. Abra o pacote.jf. Aqui está. Vamos rolar para baixo. Aqui temos o EMV E aqui temos o node Mailer. Feche isso. Vamos fechar o terminal. No topo, vamos importar a próxima resposta do próximo protetor de barra. Feito isso, temos que exportar esse arquivo Exporte uma postagem de função de usuário. Será uma solicitação de postagem, então, internamente, aceitaremos a solicitação, e é exatamente aqui que o telefone começa. Vamos importar rapidamente o EM V. Vamos exigir a configuração de pontos do en V. Aqui vamos ter uma constante. Os dados têm o mesmo peso. Solicite o ponto JS. Vamos fazer node mail equ. Também precisamos exigir o node mailer. Requer o Node Mel. Se eu não tiver feito isso, teremos um bloco de viagem Dentro do bloco triplo, temos que criar o transportador. Eu vou fazer Node Ma dot. Existe um método dentro do Node Mela chamado transporte creect, e aqui está o Dentro desse método, vamos absorver algumas propriedades. Propriedades como o pote, que é o número do pote, serão 465 C Essas coisas. Não sei, continue incomodando. O host, nesse caso, será SMTP gmail.com, O serviço será o que eu acho. Correio G. Todas as coisas, temos que atribuí-las a uma variável. Aqui eu vou fazer Cs transporter equ, certo. Então, estamos apenas atribuindo tudo ao céu aqui, transportador de código E dentro do node mailer, acessamos uma função, criamos Dentro da função, pegamos esse objeto. E esse objeto aqui, temos a propriedade de portas, e atribuímos a ele o valor f65 O host é sp e o serviço é o Gmail. Simples e curto. Com certeza, sempre que temos um tri block, definitivamente temos que pegar Vamos cortar aqui. O que pegamos? Vamos eliminar alguns erros, mas não agora. Vamos configurá-lo para os fins. Aqui, vamos ocupar a propriedade de. Opa, dê uma olhada Você tem que separá-lo para colocar o coma. Nós do, teremos o usuário, e esse será meu Gmail Por favor, faça bem em incluir seu e-mail do G no final. Sim. Vou fazer aztec@gmail.com. Você pode entrar em contato comigo com este endereço do Gmail e certificar-se de substituí-lo pelo seu. C, também temos a propriedade pass, que é a senha, única. Para o passe, precisamos gerar a senha do aplicativo do Google. Deixe-me te mostrar rapidamente. Abra sua conta GML no canto superior direito da tela, se você quiser ver o perfil Clique para abrir e gerenciar sua conta do Google. No canto superior esquerdo da tela, você verá o menu. R W no menu, clique em segurança. Estrague tudo. Verifique se a verificação em duas etapas está ativada. Como você pode ver, eu tenho minha alternativa. Isso significa que minha verificação em duas etapas está ativada. Clique para abrir. Aqui está o acento da senha. Eu tenho que incluir minha senha, e depois a seguir. Role para baixo. Logo na parte inferior, você verá as senhas do aplicativo. Recentemente, eu já tenho três senhas geradas. Para fins de ensino, tenho que fazer isso de novo do zero. Agora clique nessa seta para a direita. Nesse campo, você especificará o nome do aplicativo. Nesse caso, vou fazer um portfólio de baba para trabalhos didáticos Agora, vamos clicar em Criar. Aqui está a senha gerada. Destaque, cópia concluída. Tome nota, não copie a senha do meu aplicativo. Simplesmente porque depois dessa palestra, eu definitivamente a excluiria Vai ser inútil. Gera do seu lado e depois volta para o código. Dentro do passe, cole aqui. Certifique-se de remover os espaços intermediários, assim , assim e assim. Linda. Feito isso, a próxima linha é chamar a função de envio de e-mail. Para isso, vou fazer transportador de pontos, enviar correio. Portanto, estamos apenas chamando o método send may encontrado no node mailer. Então, dentro dessa função, estamos pegando um objeto e dentro do objeto, teremos uma propriedade que significa de onde vem o e-mail. Nesse caso, virá do campo de imputação. Sim. Então, vou fazer o nome do ponto de dados, separá-lo com a vírgula Isso vai para minha conta do Gmail. Tudo bem Estou enviando para minha conta do Gmail. E, por favor, do seu lado, você deve substituir todas as ocorrências do meu GMil seu próprio Gmail e todas as ocorrências da senha do meu aplicativo pela sua própria senha Em seguida, temos os assuntos. Vou fazer uma consulta no portfólio de Duba. Separado com a vírgula. Não sei por que isso continua obstruindo a visão. O texto aqui, vamos usar um tom como esse. Aqui, vamos usar uma string vazia porque eu não quero nada dentro dela. HTML. Vamos usar a craqueta. Dentro do marcador traseiro, vamos criar o modelo. O modelo da caixa de entrada de e-mail. Eu já tenho o design, então só precisamos copiar e colar. É apenas um CSS HTML que todos podem entender facilmente. Dentro do recurso de código dot MD, temos que copiar da tag HTM de abertura, que é das linhas 8722, linhas 928 Mais uma vez, pode conferir. Copiar. Agora temos que colá-lo dentro do saco. Aqui temos o corpo, especificamos a família da fonte. Temos o contêiner emo. A largura máxima é 600 pixels, temos a margem, o preenchimento, a cor de fundo é branca e, em seguida, a sombra da caixa é o azul consistente que estamos usando O raio da borda é de dez pixels, o que fará com que os cantos fiquem um pouco Aqui temos a tag P, o tamanho da fonte, a altura da linha e todas as coisas que você conhece Temos a etiqueta UL e a etiqueta LI. A assinatura e o resto deles. Agora temos uma tag UR e, a propósito, essa é uma tag P dizendo um Duba by digital, que aparecerá na parte superior do tema como cabeçalho Aqui com a tag UR. Temos a etiqueta LI e também a forte, que fará com que essa etiqueta pareça mais grossa e visível Agora temos o nome do ponto de dados, e-mail do ponto de dados, o número de telefone, o assunto e a mensagem. Isso aparecerá de acordo com seus campos. Então, por favor, não confunda nada aqui. Até mesmo a grafia, confira com cuidado e verifique se está bem feita Feito isso, vá até o topo. Agora vamos atribuí-lo a uma constante. Informações de custo e peso. Isso significa que vai devolver uma promessa. Portanto, temos que esperar por isso. Tudo bem agora. Role para baixo. Aqui vamos verificar se a mensagem foi bem-sucedida ou não. Se a mensagem for bem-sucedida, se as informações pontilharem o ID da mensagem, retornaremos Em seguida, responda ao Jason. Agora preste atenção. Se a propriedade de erro estiver definida como force, o que significa que se a mensagem for bem-sucedida, teremos uma mensagem de brinde Mensagem enviada com sucesso. Obrigado por entrar em contato com um bar de Duba. Simples assim. Como L vamos copiar rapidamente isso escrito. Destaque e policial. Venha aqui e cole. Se a propriedade de erro for definida como verdadeira, a mensagem de toast será que algo deu errado. Opa, mostrou um erro dentro do e. Gente, temos que retirá-lo Dentro do plugue de captura, também precisamos detectar o erro. Registro de contras. Temos que registrar o erro. Em seguida, destaque essa mensagem de erro e cole-a aqui. Simples assim. Agora formate rapidamente o código e tudo ficará limpo. Agora terminamos de criar a API. Na próxima palestra, continuaremos a consumi-lo. Nos vemos na próxima palestra. 72. Barra de progresso: Ou volte para a aula. Na palestra anterior, criamos a API Nesta palestra, vamos continuar consumindo a API, escrevendo na página de contato Abra rapidamente a página de contato. Escreva dentro das páginas, entre em contato com a página para aplaudir. Comum B para fechar o explorador. Role até o topo. Primeiro, temos que importar. Temos que importar o contêiner de torrada do react Tify Também temos que importar a torrada. Isso é para a mensagem do brinde. Por fim, vamos importar react, Tf slash, dist slash, Feito isso, vamos consumir rapidamente a API. Agora vamos ter uma função. Limpe o registro do console. Teremos a função de envio do identificador. Custos, gerencie o envio. Q, defina-a para a função de seta, dentro do parâmetro desta função, vamos pegar um evento, e então eu vou fazer o ponto do evento, previne de Fd. Rapidamente, vamos definir o deslizamento como verdadeiro. Lembre-se de que temos a variável de estado deslizante na aula anterior Vamos igualar os dados, configurá-los como um objeto vazio e, dentro, vamos espalhar o estado Claro, você sabe o que tudo isso significa. Aqui está. Ele contém o nome e número de telefone, assunto da mensagem. É exatamente aqui que acessaremos a API. Agora, pegando as aspas duplas, vou fazer a API de barra Deixe-me mostrar, estamos tentando acessar este diretório EPI e o contato do diretório Esta é a rota que estamos tentando seguir. Corte o contato. Vamos ter uma vírgula aqui e, em seguida, abrir e fechar o colchete Dentro, vamos adotar um método de propriedade. Obviamente, o método será postagens, outra propriedade, cabeçalhos, e aqui é onde implementaremos o tipo de conteúdo Barra do aplicativo, plano de barra de texto J. Estamos tentando configurar o tipo de teste que queremos fazer. Para o tipo de conteúdo, tipo de conteúdo. Vai ser aplicação, barra, pecado. Estamos tentando colocar o material no formato Jin. O mais simples é isso. Diretamente dentro do corpo. Corpo. Vamos fazer uma string de pontos JS. Queremos converter os dados no formato Jin em uma string. Veja, o corpo está mostrando uma seta, simplesmente porque temos que separá-la com a vírgula aqui Nós vamos ter os dez. Isso vai ser em um desde então. Então, a resposta. No interior, vamos colocar a carga em vigor. Custo de resposta igual, peso. Então eu vou descansar em casa. Se a resposta não retornar um erro, apagaremos os campos e seguida, enviaremos uma mensagem SX Caso contrário, também precisamos c o f e, em seguida, uma mensagem de erro. Entendido. Vamos praticar isso agora mesmo Se não houver erro de resposta, é claro, temos que limpar o estado chamando a função Cleste Depois disso, teremos uma mensagem de brinde. Esta será uma mensagem de pontos de resposta. Se houver um erro, valha a pena o processo. Também precisamos limpar o estado e, em seguida, transmitir a mensagem de erro Algo deu errado. Aqui, vamos detectar o erro corretamente. Nós somos o bloco de captura. Vamos cometer um erro. Defina o carregamento. Vamos fazer com que o carregamento caia. Também temos que limpar o estado. Copie exatamente essa mensagem de brinde, destaque a cópia, venha aqui e cole Feito isso, agora é hora de dar uma olhada. Aqui, vamos renderizar o recipiente de torrada. Então, ele aparecerá no canto superior direito. Tudo bem Feito isso, a próxima linha final é implementar o envio. Role para baixo no formulário. Aqui eu vou fazer submit, vamos chamar o identificador submit. Simples assim. Algo que eu quero chamar sua atenção é que, deixe-me te mostrar. Você pode ver que esse é o campo de e-mail e esse é o campo de telefone. Agora, dentro do assunto fd, temos que substituir o tipo por texto. Feito isso, tudo vai funcionar bem. Dentro do terminal, vou fazer PM Run Dev. Inicie o aplicativo do seu lado. Vamos voltar ao navegador. Role para baixo. Aqui, eu vou fazer Peter. Vamos fazer Peter at G. Vamos vender um número aleatório. Deixe-me dizer, a API padrão. Então, o que vou fazer é destacar tudo dentro desse lugar, copiar e colar. Clique no botão de envio. Dê uma olhada. No canto superior direito da tela, aparece a mensagem enviada com sucesso. Obrigado por entrar em contato com um bar de Duba. Estou muito feliz com isso. Vamos voltar para o Gmail. E aqui está. Clique para abrir. Você pode ver? Perfeito. Rapazes. O nome é Peter. Peter em gm.com, que é o e-mail, o número de telefone, o assunto e aqui está a Lembre-se da tag P na API. Aqui está. Deixe-me te mostrar. Volte para a rota e, em seguida, esta é a etiqueta P. Aqui estamos tentando exibir os dados. Simples assim. Nós temos o nome, o nome. Essa é a etiqueta do nome. E temos Peter, que é esse cara, que renderizamos entre a etiqueta LI Temos o e-mail, que é esse rótulo de e-mail, e depois temos o ponto de dados e mail, que renderizamos dentro do HTML interno da tag LI, e aqui está o e-mail E assim por diante e assim por diante. Amigos, tudo está funcionando bem conforme o esperado. 73. Implementação e lógica de call to action button: Tudo bem, então terminamos o design e tudo está funcionando perfeitamente, conforme o esperado. Super fino, super fantástico. Adoro cada pedacinho do design. Basicamente, o que vamos fazer nesta palestra é implementar o core to action boarding A ideia é simples. Quando o usuário rola o aplicativo para baixo, o deslocamento y da página será maior que zero Então, se o deslocamento da página for maior que zero, teremos que exibir o botão car to action no d direito da tela Que quando o usuário clicar no botão c to action, o aplicativo rolará suavemente até o componente inicial. O mais simples é ir para o código VS menos que seja implementado rapidamente. Código VS. Abra rapidamente o componente. Aqui está o diretório do carro para a ação. Nós o criamos nas primeiras palestras. Se você não tiver esse diretório, tudo o que você precisa fazer é clicar com o botão direito do mouse nos componentes, nova pasta e, em seguida, nomeá-la para ação, assim. Linda. Dentro do carro para a ação, clique com o botão direito do mouse, novo arquivo. Chamada à ação S. Gere o componente funcional rapidamente. Vamos importar o efeito de uso do gancho estadual U. Feito isso, vamos voltar rapidamente ao componente do cabeçalho e copiar a função de rolagem da alça. Cabeçalho de cabeçalho gs Também precisamos copiar a variável de estado para o evento scroll. Temos que destacar as linhas 11 a 24. Copie, volte para a ação C e cole aqui. Aqui, estamos verificando se página Y do ponto da janela é maior que zero. Se a página de pontos da janela i do conjunto for maior que zero, então vamos atualizar esse cara para verdadeiro, e se esse cara for verdadeiro, temos que fazer alguma coisa. Agora vamos fazer se s crow for definido como verdadeiro, retornaremos uma interface de W entre parênteses, teremos um D, fornecendo o nome da classe A cor de fundo será vermelha 500. Esta é apenas minha especificação. Você pode fazer outra coisa do seu lado. Queremos que seja corrigido. A parte inferior será oito. Da direita, também queremos oito. Vamos rapidamente fechar o explorador. O policial, vamos deixar claro. O índice z para que ele possa aparecer na parte superior do nosso conteúdo. Vamos fazer com que caiba. Feche o D. O que precisamos fazer agora é copiar e colar o SVG dentro do D. Volte para o recurso de código dot MD Role até o final. Acho que a temos aqui. Aqui está. Copie o SVG. Destaque a cópia. Ganhe a pasta D. S. Não vamos ter nada. Formate rapidamente para o código. Quando você salva, vamos ver o que temos no navegador. Tudo bem. Temos que renderizá-lo com a página, que é a página de pagamento e aqui está. Role para baixo. Acho que devemos fazer isso logo após o depoimento Aqui eu vou fazer um apelo à ação. Certifique-se de importá-lo na parte superior, e aqui está. Salve no navegador. Agora, quando eu rolo o aplicativo, aqui está. Você pode ver no canto superior direito da tela que você verá a portabilidade de call to action. Mas quando você clica nele, nada acontece. Vamos implementar rapidamente o clique. Chamada para ações. Aperte a parte superior, exatamente onde está D. Vamos clicar, e quando um usuário clica nesse botão, queremos rolar suavemente até o componente inicial Então eu vou fazer window dot, scroll 200. Você sabe disso, deixe-me te mostrar aqui. Quando for maior que zero, ele atualizará o estado inicial para verdadeiro. Quando o estado inicial for verdadeiro, essa nota aqui aparecerá à direita da tela com a inicialização Agora, a ideia é essa. Deixe-me te mostrar. Quando eu rolar o aplicativo, esse cara aqui aparecerá. Agora, no eixo y, a aplicação é maior que zero. Mas quando clicamos nesse botão, queremos igualar a aplicação no eixo y a zero Queremos devolvê-lo a zero. Isso é exatamente o que estamos fazendo aqui. Inicialmente, fizemos isso quando esse cara for maior que zero, esse cara será definido como verdadeiro, e então isso aparecerá. Agora, quando isso aparece, significa que é maior que zero. Quando clicamos nesse DF, também queremos enviá-lo de volta à posição normal Acho que é até onde eu posso explicar isso. Então, sim, ao salvar o aplicativo, confira o navegador agora, clique no botão e bombardeie Você pode ver? Portanto, em qualquer lugar do aplicativo, ao clicar nesse botão, você sempre retornará o aplicativo a zero no eixo y. O que significa que você sempre voltará para casa. Eu acho que essa explicação é clara o suficiente, honestamente. Deixe-me implementar a animação para você. Volte aqui mesmo no Steve. Eu vou fazer animação. Nós vamos fazer o Bound. Simples assim. Agora, dê uma olhada. O botão de call to action está saltando alegremente na extremidade direita da tela quando você rola o Eu gosto disso. Outra coisa que eu quero fazer é tornar o ícone um pouco adesivo Então, podemos fazer isso aqui. Em vez de 1,5, podemos fazer cinco. Agora, ele aparece de forma ampla e parece bom Então, essa é exatamente a intenção. 74. Barra de carregamento 49: Ele, então implementamos o formulário. Também testamos a API. Tudo está funcionando perfeitamente, conforme o esperado. Nesta breve palestra, continuaremos tornando o formulário mais interativo para que, quando o usuário clicar no painel de entrada, a barra de carregamento apareça e dê uma ideia de que algo está acontecendo nos bastidores O usuário precisa esperar para ver o resultado. Parece bom, certo. Usei o código Vs, a menos que seja implementado rapidamente. Role para baixo até onde temos o formulário. E aqui está. Também temos que rolar para baixo. Vamos implementá-lo aqui mesmo em cima desse botina. Vamos implementar a barra de progresso com base na condição, e a condição é unilateral. Depois de preencher o formulário, quando o usuário clicar no parafuso de envio, a barra de carregamento aparece Isso será feito com base em truc, e isso é bastante simples de implementar Agora vamos fazer. Em carregando, e n, então vamos mostrar a barra de carregamento. Nós não vamos ter um L. Então vamos ter um d, dê a ele um nome de classe. Nós no d, a margem inferior é três. O texto, vamos alinhá-lo ao centro. ML, não estou falando de ML em termos de Mercedes, mas margem restante W6h6. Vamos dar a ela a fronteira. E a borda colorida da borda, azul 500. Vamos fazer com que sejam 600. A fronteira será sólida. E depois vamos fazer Animate, Dash, Spain. Feche o desenvolvedor. Ok, confira no navegador. Carregue, preencha rapidamente o formulário. Agora, vamos clicar na areia. Opa. Dê uma olhada. Você pode ver, e a mensagem foi bem-sucedida. Não gosto do formato da barra de carregamento. O que devemos fazer agora é arredondado. Vamos tê-lo. Novamente, preencha o fd. Aqui está enviado, e dê uma olhada. Você pode ver, e aqui temos a mensagem postal. Tudo está funcionando perfeitamente, conforme o esperado. Vamos voltar para casa. Dê uma olhada. Tommy. Não parece bom? Claro que sim. Tudo bem Uma última coisa que temos que implementar é o call to action butting. Deixe-me mostrar que, quando eu rolar o aplicativo para baixo dessa forma, a barra de chamada à ação aparecerá na borda direita da tela E quando eu clico no botão de call to action, ele vai rolar suavemente até o componente inicial Onde quer que você esteja, por exemplo, se estiver aqui embaixo, ele aparecerá na borda direita da tela Ao clicar, você rolará suavemente até o componente inicial. Ok, vamos resumir isso implementando o core to action boarding. 75. Correções de cabeçalho (Assignment): Olá. Bem-vindo de volta à aula. Nesta breve palestra, vamos corrigir o comportamento do cabeçalho no dispositivo móvel e também quando você abre outra página Deixe-me te mostrar rapidamente. Em dispositivos móveis, quando rolamos para o topo dessa forma, o cabeçalho ainda aparece na parte superior. Não gostamos disso porque já temos a navegação por aqui, então não há necessidade de mostrar esse espaço aqui. O menu já está aqui, então não há necessidade de todo esse espaço. Temos que tirá-lo. Esse é o comportamento número um a ser corrigido. Quando você expande o aplicativo, por exemplo, vamos para a seção Higher ME. Clique para abrir. Agora, quando você clica no menu, a altura do desenho do diagnóstico não está mais cheia Além disso, você perceberá que o menu realmente caiu um pouco. Não é isso que queremos. Está bem? A primeira coisa que faremos aqui é corrigir o comportamento no dispositivo móvel. Deixe-me te mostrar. Você pode ver? Dê uma olhada. Não parece nada bom. Então você volta ao código do VS e abre o componente. Pontos do cabeçalho do cabeçalho s. Role para baixo e deixe-me mostrar para você. Aqui, temos uma condição e. Dissemos que I scrolled é definido como verdadeiro, que é quando a aplicação no eixo y é maior que zero Quando você rola o aplicativo, atribuiremos a ele um cabeçalho de nome de classe, caso contrário, nenhum nome de classe será atribuído. Aqui, e também o estamos estilizando de uma maneira diferente Dissemos que se o scrode for definido como verdadeiro, a cor de fundo será branca e, caso contrário, ficará transparente aqui Além disso, se for verdade, estamos dando a ela essa sombra de caixa. Eu não acho que isso seja necessário aqui. Coloque um comentário sobre ele. Salve o projeto. Confira no navegador. Você pode ver? Tudo está funcionando bem no dispositivo móvel. E agora isso traz outro problema. Quando você maximiza o aplicativo em um dispositivo grande, vá até o topo, consegue ver? Agora não temos mais esse fundo de embalagem transparente. E isso não é bom porque faz com que esses menus pareçam realmente estranhos. Você pode ver? Não faz sentido, então precisamos fornecer um pacote quando você rola o aplicativo em um dispositivo grande? Volte rapidamente ao código VS. Seguindo essa condição, se a rolagem estiver definida como verdadeira, estilizaremos a cabeça Aqui, volte rapidamente para o CSS global. Aqui está. Clique para abrir. Role para baixo. Agora temos que atingir um ponto de interrupção específico. Abra e feche parênteses, traço médio w em um ponto de quebra de 12.80 Vamos estilizar o headshow, head show. Observe que o programa é sobre carboidratos e, a propósito, temos que usar o ponto aqui Aqui, a cor de fundo será branca. A sombra da caixa. Vamos copiar do cabeçalho. Vai ter exatamente a mesma sombra de caixa aqui. Portanto, cole-o ao salvar o projeto no navegador. Existem esses. Você pode ver que está funcionando? Eu gosto disso. Isso é lindo. Dê uma olhada. Agora, no dispositivo móvel, você terá um comportamento muito bonito. Você pode ver? Dê uma olhada. Tudo bem. Eu tenho que reduzir esse cara para 75. Um lindo. Ok, tudo bem. A próxima linha final é corrigir esse comportamento aqui. O desenho do diagnóstico em uma página diferente. Você pode ver? Essas coisas não são boas, então vamos voltar rapidamente ao ponto de desenho do diagnóstico Feche o CSS global, feche o cabeçalho e, em seguida temos que abrir o desenho diagonal. Na verdade, é muito simples. Deixe-me te mostrar aqui. Não sei onde temos essa condição. , oh, garoto. W no cabeçalho. Temos uma condição aqui. Dissemos que, se o nome do caminho for um quo, está aqui, que significa que quando o usuário clica nesse nome de caminho, atribuímos que de cima para zero Sim, atribuímos de cima para -98 pixels, e é por isso que você vê esse comportamento. Dê uma olhada. Esse espaço em branco aqui na parte inferior é -98 pix. Essa é a razão pela qual o menu não está cobrindo a tela. Quando removemos esse valor, esse valor negativo, vamos torná-lo zero. Quando você salva o projeto, agora ele está cobrindo a tela, mas temos outro espaço na parte superior. Não se preocupe, definitivamente temos que consertá-lo agora. Agora, volte ao código VS. Abra o desenho diagonal Cs. Dentro do desenho diagonal, vamos fazer o topo. Vamos fazer com que seja zero, assim. Quando você salva o projeto. Agora, para o desenho diagonal, tudo está funcionando perfeitamente conforme o esperado. Mas para o menu, também é exatamente o mesmo problema que acabamos de resolver agora. Volte para o código VS, dentro do ponto de desenho diagonal S. Temos que procurar o local onde temos a condição. Acho que deveria estar no topo aqui. Sim. Está no topo. Você pode ver quando o nome do caminho é igual, esse cara. Agora, aqui em cima, configuramos para zero, e então, configuramos para 100 pixels. Seria incrível se o definíssemos como zero. Então, quando o usuário clicar no menu, ele aparecerá do zero. Caso contrário, também aparecerá do topo zero. Você pode ver? Está andando. Perfeito. Então, vamos voltar para casa. Temos que testá-lo. OK. Vamos clicar nesse cara. Dê uma olhada, está funcionando. Então está funcionando a multa de Pavel. Em um dispositivo móvel, ele também funciona no iPad Mini. Está funcionando. Isso é super limpo, super incrível. Tudo bem, terminamos com a cabeça. E agora temos o comportamento esperado. Bom. Na próxima palestra, vamos corrigir o cartão no dispositivo móvel Deixe-me mostrar para você em um dispositivo móvel. Você pode ver? O texto na parte inferior do cartão desapareceu. Então é exatamente isso que vamos corrigir na próxima palestra. Na verdade, é uma solução muito rápida. Te vejo então. 76. Correção de controle deslizante no dispositivo móvel: Bem-vindo de volta à aula. Nesta palestra, vamos corrigir o comportamento do cartão em dispositivos móveis Depois disso, vamos corrigir os telefones. Como somos um dispositivo móvel, você não verá mais a etiqueta P. Você vê? Então, não queremos que seja assim. Volte para o código VS, abra os componentes, dentro dos componentes, abra o cartão deslizante e, em seguida, o cartão deslizante para S. Vá até o topo R aqui, onde temos esse D. Vamos fazer a altura seja 280 pixels Quando você salva, no navegador, eles são os. Tudo está funcionando perfeitamente bem. Agora, corrigimos o comportamento no dispositivo móvel. OK. Vamos voltar rapidamente para onde temos a tag P, que é o título aqui. O que devemos fazer. Deixe-me mostrar aqui que devemos usar a fonte, mas pipograficamente, cometemos um erro e fizemos a frente. Então essa é a fonte. Quando você salva o navegador, agora, ele aparece assim. Você pode ver que não é muito bot. Esse é o padrão. Eu gosto disso. Novamente, retire-o do dispositivo móvel. Tudo está bem alinhado. Dê uma olhada. Tudo bem. Então, para o depoimento em dispositivo móvel, eu não quero que eles apareçam A propósito, essa é a minha opinião, então você pode fazer isso do seu jeito que quiser Então, para mim, vou apenas tirar o depoimento em um dispositivo móvel A maneira como podemos fazer isso é, na verdade, muito simples. Ok, depoimento testemunhal. Dentro desse df, vou fazer aquecimento, mas em um dispositivo médio Vamos ter um bloco de exibição. Ao salvar, confira. Agora nós o temos em um dispositivo maior. Mas em mais por dispositivo, ele desaparecerá. Tudo legal aqui. Tudo bem. Parece bom. Vamos dar uma olhada no iPad. Nós o temos no iPad. No iPad A. Metade da coisa aparece bem. Opa. Acho que devemos ficar bem. Tudo bem. Dê uma olhada. Ele foi projetado profissionalmente e habilmente para funcionar em todos os dispositivos Incrível. Isso está desligado agora. Certifique-se de ler e revisar as pontuações. Adeus e cuidado holístico.