Neste artigo mostrarei como aplicar o layout css-grid em uma aplicação Angular.
Bem, antes de mais nada, eu, por exemplo, sempre prefiro gerar a minha folha de estilo antes de colocar na aplicação final. Ou seja: um template estático.
Bom, até aí tudo bem – sempre que faço meu layout css-grid procuro trabalhar com a base do HTML5 e utilizar as “tag” default do HTML, principalmente para desenhar a base da aplicação, ou seja, onde os conteúdos serão apresentados e tudo mais. Porém, me deparei com um pequeno detalhe quando implantei a folha de estilos no Angular 7+.
Neste link é possível baixar um exemplo bem simples de layout utilizando o css-grid.
As áreas definidas no CSS, serão:
div.app{position: relative;height: 100vh;background-color: #f2f2f2;display: grid;grid-template-columns: 1fr;grid-template-rows: 150px 100px 1fr 50px;grid-template-areas: 'header' 'jumbotron' 'main' 'footer';}
Se você copiar o CSS para dentro de uma aplicação Angular e componentizar ela, separando o header, corpo e rodapé o layout irá quebrar.
O que? Sim! Isso acontece porque, mesmo definindo o “grid-area”, o layout-grid trabalha sempre com a base “first-child”, ou seja, a primeira tag que tiver após a definição da área principal.
HTML puro:
HTML gerado pelo Angular:
Como a ideia da componentização é “quebrar” a aplicação em várias camadas e reutilizar os componentes ou até mesmo para separar e deixar a aplicação com um código mais limpo – diferente do ReactJS -, o Angular gera uma tag do próprio componente (como as imagens acima).
Ou seja, o código que está dentro componente é encapsulado dentro de uma tag principal, gerado pelo Angular e por isso ele acaba quebrando o seu layout.
Já no ReacJS isso não acontece. Ele simplesmente, não cria essa tag “intermediária” entre o componente principal e seus filhos.
Pois bem, a solução para resolver este detalhe e manter o seu template o mais fiel possível com o aplicado no Angular é aplicar o nome do componente com o id/tag do CSS.
Ou seja, a tag original terá que ser substituída pelo componente ou também aplicar a classe direto na chamada do component caso trabalhem com class.
Exemplo no Angular:
HTML original (a tag main é o próprio componente):
Como normalmente o css-grid é apenas aplicado para fazer a estrutura da página, não vejo problema em nomear o componente dessa forma. No arquivo “angular.json”, apagar a configuração do “prefix”. Por padrão esta vem com o valor “app”. Esta opção faz com que quando você criar um componente a partir do Angular CLI “ng g c “meu_componente”, ele não gere o componente com o ID, “app.meu_componente”.
Configurando a geração dos componentes:
No final, a estrutura ficou próxima do arquivo html original:
HTML original:
<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div class="app"><header><h1>Cabeçalho</h1></header><div class="secao"><h1>Seção 1</h1></div><main><div><h1>Conteúdo 1</h1></div><div><h1>Conteúdo 2</h1></div><div><h1>Conteúdo 3</h1></div></main><footer><h1>Rodapé</h1></footer></div></body></html>
Os exemplos completos podem ser encontrados no meu repositório do GitHub.
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?