Cómo utilizar Flex Layout para Angular

Introducción

Flex Layout es un motor de componentes que le permite crear diseños de página utilizando CSS Flexbox con un conjunto de directivas disponibles para usar en sus plantillas.

La biblioteca está escrita en TypeScript puro, por lo que no se necesitan hojas de estilo externas. También proporciona una forma de especificar diferentes directivas en diferentes puntos de interrupción para crear diseños adaptables.

En este tutorial, creará una aplicación Angular de ejemplo y utilizará Flex Layout para organizar elementos.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local.
• Puede resultar beneficioso tener cierta familiaridad con la configuración de un proyecto Angular y el uso de componentes Angular.

Este tutorial fue verificado con Node v14.13.1, npmv6.14.8, angularv10.1.6 y @angular/flex-layout.

Paso 1: Configuración del proyecto

Puedes usarlo @angular/clipara crear un nuevo proyecto Angular.

En su ventana de terminal, utilice el siguiente comando:

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

Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, “Less” o “Stylus”), sin enrutamiento y omitirá las pruebas.

Navegue hasta el directorio del proyecto recién creado:

cd angular-flex-example

Desde la carpeta de su proyecto, ejecute el siguiente comando para instalar Flex Layout:

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

A continuación, importe FlexLayoutModuleen su módulo de aplicación:

src/app/app.module.ts

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 { }

Inicie el proyecto para verificar que no haya errores.

npm start

Si visita la aplicación local (normalmente en localhost:4200) en su navegador web, verá un "angular-flex-example app is running!"mensaje.

Con este conjunto de andamios en su lugar, puede utilizar Flex Layout en sus plantillas.

Paso 2: Experimentar con Flex Layout

A continuación, modificará la app.component.htmlplantilla para utilizarla FlexLayoutModule.

Aquí hay una figura que muestra el resultado final de la experimentación con Flex Layout en este tutorial:

Primero, abre app.component.csstu editor de código y agrega las siguientes líneas de código:

src/app/app.component.css

.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;}

Luego, ábrelo app.component.htmlen tu editor de código y reemplaza el código con dos contenedores divy cinco elementos internos div:

src/aplicación/aplicación.componente.html

div  div    Item 1  /div  div    Item 2  /div  div    Item 3  /div/divdiv  div    Item 4  /div  div    Item 5  /div/div

Después de volver a compilar, visita tu aplicación en un navegador web. Ahora tendrás cinco divs apilados uno sobre el otro.

A continuación, añade fxLayout:

src/aplicación/aplicación.componente.html

div     fxLayout  div    Item 1  /div  div    Item 2  /div  div    Item 3  /div/divdiv     fxLayout  div    Item 4  /div  div    Item 5  /div/div

Este código aplicará los estilos display: flexy flex-direction: rowa los contenedores divs.

Después de volver a compilar, visite su aplicación en un navegador web; observará tres divs compartiendo la fila superior y dos divs compartiendo la fila inferior.

A continuación, añade fxLayoutAligny fxLayoutGap:

src/aplicación/aplicación.componente.html

div     fxLayout     fxLayoutAlign="center"     fxLayoutGap="10px"  div    Item 1  /div  div    Item 2  /div  div    Item 3  /div/divdiv     fxLayout     fxLayoutAlign="center"     fxLayoutGap="10px"  div    Item 4  /div  div    Item 5  /div/div

Este código se aplicará place-content: stretch centera align-items: stretchlos estilos del contenedor div. También se aplicará 10pxal espacio entre los elementos flexibles.

Nota: En la versión 10.0.0-beta.32, fxLayoutGapse utiliza la propiedad CSS marginen lugar de utilizar la propiedad CSS gap.

A continuación, utilice sufijos responsivos para cambiar los estilos de flexbox en determinados puntos de interrupción:

src/aplicación/aplicación.componente.html

div     fxLayout     fxLayout.xs="column"     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div    Item 1  /div  div    Item 2  /div  div    Item 3  /div/divdiv     fxLayout     fxLayout.xs="column"     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div    Item 4  /div  div    Item 5  /div/div

Este código establecerá puntos de interrupción en xstamaños de pantalla (muy pequeños). Cambiará el diseño del valor predeterminado "row"a "column"y el tamaño del espacio entre espacios de "10px"a "0".

Después de volver a compilar, visite su aplicación en un navegador web. Cambie el tamaño de la ventana del navegador hasta el xspunto de interrupción (menos 599pxancho que el tamaño original) y observe cómo cambian los estilos.

Los alias de puntos de interrupción están disponibles para varios tamaños de pantalla:

• sm- pequeño
• md- medio
• lg- grande
• xl– extra grande

También hay directivas que se pueden agregar para elementos secundarios.

A continuación, añade fxFlex:

src/aplicación/aplicación.componente.html

div     fxLayout     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div       fxFlex="15%"      Item 1  /div  div       fxFlex="20%"      Item 2  /div  div       fxFlex      Item 3  /div/divdiv     fxLayout     fxLayout.xs="column"     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div       fxFlex      Item 4  /div  div       fxFlex="200px"      Item 5  /div/div

Este código aplicará flex-grow: 1, flex-shrink: 1, y flex-basis: 100%. Al especificar un valor de ancho, se aplicará una max-widthpropiedad.

A continuación, añade fxFlexOrdery fxFlexOffset:

src/aplicación/aplicación.componente.html

div     fxLayout     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div       fxFlex="15%"      Item 1  /div  div       fxFlex="20%"       fxFlexOrder="3"      Item 2  /div  div       fxFlex      Item 3  /div/divdiv     fxLayout     fxLayout.xs="column"     fxLayoutAlign="center"     fxLayoutGap="10px"     fxLayoutGap.xs="0"  div       fxFlex       fxFlexOffset="50px"       fxFlexOffset.xs="0"      Item 4  /div  div       fxFlex="200px"      Item 5  /div/div

Este código se aplicará order: 3al segundo artículo. También se aplicará margin-left: 50pxal cuarto artículo.

Después de volver a compilar, visite su aplicación en un navegador web, notará que el segundo elemento está en la tercera posición de la fila y el cuarto elemento tiene 50pxespacio desde el inicio del flexbox.

Con esto concluye una breve experimentación con Flex Layout.

Conclusión

En este tutorial, utilizaste Flex Layout con una aplicación Angular. Esto te permitió crear un diseño usando estilos CSS de Flexbox preconfigurados sin estilos adicionales.

Puede consultar la descripción general de la API para obtener una visión más detallada de las directivas disponibles.

En este ejemplo, ha codificado de forma rígida los valores de la directiva. También es posible utilizar la vinculación de datos para vincular valores en la clase del componente (por ejemplo, [fxLayout]="direction"). Esto le permitirá crear diseños altamente dinámicos que el usuario puede controlar y cambiar.

Flex Layout también se puede utilizar en combinación con Angular Material para componentes de Material Design.