Cómo crear una barra de herramientas (Toolbar) usando material angular

Seguimos con nuestra serie de tutoriales basados en material angular  (diseñado  por el equipo de angular ) esta vez explicaremos como crear una barra de herramientas para nuestra web ó aplicación desarrollada con angular de google.

Pues bien lo primero que hacemos será crear nuestro proyecto usando el CLI de angular:

 ng new toolbar-example 

una vez tengamos nuestro proyecto angular procedemos a instalar angular material siguiendo este tutorial Incluir Angular Material en tus proyectos. Una vez tengamos Angular Material instalado procedemos a agregar en nuestro app.component.ts



 
      import {MatToolbarModule} from '@angular/material/toolbar'; 



en la sección de @NgModule importamos el modulo de la siguiente manera


imports: [ MatToolbarModule  ]

Ya habiendo importado el módulo procedemos a crear nuestra primera barra de herramientas a través del siguiente código

<mat-toolbar>
     <span>Mi Aplicación</span>
</mat-toolbar>;

También podemos crear barras de herramientas de varias filas de la siguiente manera:

<mat-toolbar> 
  <mat-toolbar-row>
    <span>Primera Fila</span>
  </mat-toolbar-row>

 <mat-toolbar-row>
    <span>Segunda Fila</span>
  </mat-toolbar-row>
</mat-toolbar>

La barra de herramientas por defecto no hace ningún posicionamiento de su contenido, esto le brinda al programador control total para ubicar el ontenido de acuerdo a las necesidades de su aplicación

Un patrón común es posicionar el título a la izquierda y algunos íconos que performen acciones a la direcha. Esto se puede hacer de manera facil y sencilla usando display: flex

 

<mat-toolbar color="primary">
  <span>Título de la aplicación</span>

  <!-- This fills the remaining space of the current row -->
  <span class="fill-space"></span>

  <span>aqui agregas tus iconos o texto alineado a la derecha</span>
</mat-toolbar>

.fill-space {
  /* This fills the remaining space, by using flexbox. 
     Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

Con ésto ya tenemos nuestra primera barra de herramientas usando Angular Material
Hasta la próxima!

Leave a reply:

Your email address will not be published.

Site Footer