Front End

4 mar, 2019

Aplicando o CSS Grid Layout no Angular

208 visualizações
Publicidade

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