Implementando Flex Layout no Angular: Um Guia Prático

Hark Labs2022-05-12 · 13 min read

Implementando Flex Layout no Angular: Um Guia Prático

Introdução

CSS Flex Layout é usado para criar layouts fluidos flexíveis. No entanto, ao usar Angular existem cenários em que precisamos de mais controle dinâmico sobre os layouts. Além disso, usar CSS Flexbox exige uma estilização complicada que pode ser difícil para muitos desenvolvedores. O Flex Layout é um motor de componentes que visa resolver esse problema. Ele fornece um conjunto de diretivas que estão disponíveis para implementação em suas aplicações.

O Flex Layout usa Typescript tornando-o ideal para aplicações Angular. Não são necessárias folhas de estilo externas, e diferentes diretivas podem ser usadas para criar layouts responsivos. Neste tutorial, vamos criar uma aplicação Angular simples e injetar o Flex Layout para organizar nossos componentes.

Vamos começar!

Pré-requisitos

As aplicações Angular usam o Node.js runtime. Para concluir este tutorial, você precisará ter o Node.js instalado em sua máquina de desenvolvimento. Temos um guia completo Como Instalar o Node.js no Ubuntu 18.04 que ajudará você a configurar o Node.js facilmente.
Você também precisará ter alguma familiaridade com o uso de componentes Angular e a configuração de um projeto Angular.

Configuração do Projeto

Aqui precisamos realizar duas etapas:

Precisamos configurar uma nova aplicação Angular.
Precisaremos instalar o Flex Layout a partir do npx para que possamos importá-lo e usá-lo em nossa aplicação.

Para criar uma nova aplicação Angular, abra seu terminal e execute o comando abaixo:

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

1	npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

Aqui estamos criando uma nova aplicação Angular usando o @angular/cli. O nome da nossa aplicação é angular-flex-example. Usaremos CSS em vez de Sass ou Less como estilização. Além disso, especificaremos que não precisamos de roteamento. Também não estamos preocupados com os testes, por isso também os ignoramos.

Agora que sua aplicação está pronta, navegue até o diretório da aplicação e execute o comando abaixo para instalar o Flex Layout:

cd angular-flex-example
npm install @angular/flex-layout@10.0.0-beta.32

1 2	cd angular-flex-example npm install @angular/flex-layout@10.0.0-beta.32

Assim que o comando acima concluir a instalação, adicione o código abaixo no seu módulo app para importar o FlexLayoutModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],

    imports: [
        BrowserModule,
        FlexLayoutModule
    ],

    providers: [],

    bootstrap: [AppComponent]
})

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FlexLayoutModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Em seguida, execute o comando abaixo para garantir que tudo esteja funcionando como esperado:

npm start

npm start

Sua aplicação será servida em localhost:4200 por padrão. Navegue até esta URL no navegador web. Você verá a mensagem: “angular-flex-example is running!. Com essa configuração concluída, vamos projetar nosso template usando o Flex Layout.

Criar o Flex Layout

Aqui adicionaremos código em app.component.html para usar o Flex Layout com o FlexLayoutModule. Nosso resultado final será semelhante à figura abaixo:

Para alcançar o resultado acima, abra o app.component.css no seu editor e adicione as linhas de código abaixo:

.container {
    margin: 10px;
}

.item {
    border-radius: .2em;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 2em;
    padding: 4em 1em;
    text-transform: uppercase;
}

.item-1 {
    background-color: #009169;
}

.item-2 {
    background-color: #55b296;
}

.item-3 {
    background-color: #9fd3c3;
}

.item-4 {    
    background-color: #e7b013;
}

.item-5 {
    background-color: #073443;
}

.container {

margin: 10px;

}

.item {

border-radius: .2em;

color: #ffffff;

font-family: sans-serif;

font-size: 2em;

padding: 4em 1em;

text-transform: uppercase;

}

.item-1 {

background-color: #009169;

}

.item-2 {

background-color: #55b296;

}

.item-3 {

background-color: #9fd3c3;

}

.item-4 {

background-color: #e7b013;

}

.item-5 {

background-color: #073443;

}

Agora que você adicionou o código acima, abra o arquivo app.component.html e adicione o seguinte código. Este código possui duas divs container e cinco divs internas:

<div class="container">
    <div class="item item-1">
    Item 1
    </div>
    
    <div class="item item-2">
    Item 2
    </div>
    
    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Item 4
    </div>
    
    <div class="item item-5">
    Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Depois disso, compile e execute sua aplicação. Você verá cinco divs empilhadas umas sobre as outras porque não fornecemos nenhum layout até agora. Para adicionar o fxLayout adicione o código abaixo:

<div class="container" fxLayout>
    <div class="item item-1">
    Item 1
    </div>

    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Item 4
    </div>
   
    <div class="item item-5">
    Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

No código acima, após aplicar este fxLayout, os estilos das propriedades CSS display:flex e flex-direction:row são aplicados ao container divs. Agora, ao executar a aplicação, você terá três divs na primeira linha e duas divs na linha inferior.

Em seguida, adicionamos fxLayoutAlign e fxLayoutGap para aprimorar nosso layout:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Item 1
    </div>

    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Item 4
    </div>

    <div class="item item-5">
    Item 5
    </div>
</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Isso aplicará place-content: stretch center e align-items: stretch estilos ao container div. Também aplicará 10px de espaço entre os itens flex.

Agora que aplicamos fxLayout, é hora de tornar nosso layout responsivo:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Item 1
    </div>
    
    <div class="item item-2">
    Item 2
    </div>

    <div class="item item-3">
    Item 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Item 4
    </div>

    <div class="item item-5">
    Item 5
    </div>
</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Este código definirá o ponto de interrupção para as telas extra pequenas xs . A tela mudará o layout de linha padrão para coluna e o tamanho do espaçamento será reduzido de “10px” para “0px” nas telas extra pequenas. Você pode testar isso executando a aplicação e redimensionando a janela para xs (menos de 599px de largura). Você observará a alteração na estilização.

Para vários tamanhos de tela, temos diferentes sufixos:

sm – pequeno
md – médio
lg – grande
xl – extra grande

Também temos diretivas para elementos filhos. Adicione fxFlex como no código abaixo:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Item 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Item 2
    </div>

    <div class="item item-3" fxFlex>
        Item 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        Item 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Isso aplicará flex-grow: 1, flex-shrink: 1, e flex-basis: 100% ao layout. Se você especificar o valor de largura, ele aplicará a propriedade max-width.

Vamos adicionar fxFlexOrder e fxFlexOffset:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-1" fxFlex="15%">
    Item 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Item 2
    </div>

    <div class="item item-3" fxFlex>
    Item 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    Item 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Item 5
    </div>

</div>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

Usando este código, aplicamos order: 3 ao segundo item. Ele também aplicará margin-left: 50px ao quarto item. Agora, se você executar a aplicação, verá que o segundo item está na terceira posição da linha, enquanto o quarto item recebe um espaçamento de 30px a partir do início.

Resumindo

Neste tutorial, aprendemos como implementar o Flex Layout em aplicativos Angular. Isso será útil, pois poderemos usar layouts CSS Flexbox prontos para uso sem ter que codificar a estilização nós mesmos. Se precisar de mais informações, consulte a Wiki do Flex Layout na página do GitHub.

Para manter as coisas simples neste tutorial, não usamos binding para vincular valores na classe do componente. No entanto, tanto o binding unidirecional quanto o bidirecional são possíveis na classe do componente [fxLayout]="sua direção de layout". Isso lhe dará mais controle para construir layouts e casos de uso dinâmicos poderão ser tratados.

Os aplicativos Angular usam o Node.js como seu runtime. Se você quiser aprender mais sobre o Node.js e como implantar aplicativos Node.js no Docker, confira o nosso Como implantar um aplicativo Node.js (Express.js) com Docker no Ubuntu 20.04 tutorial. Para saber mais sobre o Angular, confira o nosso tutorial Navegação com RouterLink, Navigate e NavigateByUrl no Angular Router.

Feliz Computação!

Hark Labs

Autor · CloudSigma

Preslav Dobrev é um designer criativo na CloudSigma, focado na construção de uma identidade empresarial consistente por meio de canais de marketing tradicionais e inovadores. Ele é hábil em combinar a visão artística com o marketing estratégico para criar narrativas de marca impactantes.

Implementando Flex Layout no Angular: Um Guia Prático

Introdução

Pré-requisitos

Configuração do Projeto

Criar o Flex Layout

Resumindo

Hark Labs

Comentários