Crear tabs usando angular material

Continuamos con la serie de tutoriales de angular material, en esta oportunidad les traigo como crear tabs para organizar el contenido de su aplicación Web. Los pasos son muy sencillos , lo primero que debemos hacer es seguir el tutorial de como integrar angular material a nuestros proyectos, el cual lo puedes leer aquí.

Empezamos creando nuestra app :

   ng new mat-tabs

 

Una vez tengamos nuestro proyecto creado y  hayamos instalado angular material  , procedemos a incluir en nuestro material.module.ts lo siguiente:

import { MatTabsModule } from '@angular/material/tabs'; 

una vez importado el módulo, ya solo nos faltaría crear nuestras tabs de la siguiente manera en nuestro app.component.html:

<mat-tab-group>
  <mat-tab label="primera"> 
      Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse sodales sagittis, porttitor litora dis nisi lacus in duis velit erat, elementum feugiat aliquet habitant non tincidunt maecenas tempus praesent. Mi lectus hendrerit fames penatibus quam mattis suscipit aptent ac cubilia, diam magna curae convallis ultricies consequat tortor ad nascetur, id aliquam erat massa dui sociosqu dignissim metus donec. Dignissim in ligula vitae augue odio purus nec phasellus primis sagittis, tellus nascetur velit sollicitudin habitasse sodales netus auctor.
  </mat-tab>
  <mat-tab label="segunda">
    Proin integer hac nulla molestie tristique nec montes scelerisque sociis lacinia porttitor sociosqu venenatis, primis cum felis lectus sodales id libero iaculis aenean et est. Porttitor parturient lectus fames habitasse nam dictum egestas magnis in dapibus, habitant venenatis sollicitudin lacinia ad lobortis platea proin per bibendum, et nulla senectus aliquam quisque congue quis nunc felis.
  </mat-tab>
  <mat-tab label="tercera">
    Vulputate netus non penatibus ridiculus a cras platea in gravida nostra, metus dignissim et eu fringilla aenean imperdiet dis tempor, pharetra euismod ultrices nascetur libero dapibus vivamus vitae conubia.
  </mat-tab>
</mat-tab-group>

Esto es todo lo que necesitamos para tener tabs con angular material en nuestro proyectos.

puedes descargar el código fuente aqui.

Hasta el  próximo tutorial!

Leave a reply:

Your email address will not be published.

Site Footer