Como Crear Pestañas (Tabs) con Angular y Material Design – Parte 2 (Final)

Angular | | 👤 Crear un Post, Eventos Devs, Foro

Demo Github

En la parte anterior llamada Como Crear Pestañas (Tabs) con Angular y Material Design – Parte 1, creamos un nuevo proyecto en Angular, para nuestra aplicación. Asimismo instalamos Material Design Web, mediante el paquete  @angular/material, también creamos 3 componentes para las pestañas y configuramos el contenido de los archivos del componente principal AppComponent. En esta segunda y última parte terminaremos con el tutorial Como Crear Pestañas (Tabs) con Angular y Material Design, vamos con ello.

Partes 1

  • Parte 1
  • Parte 2 (Final – Código Fuente GitHub)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar” “¿ Qué Es NoCode Development ?” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear Pestañas (Tabs) con Angular y Material Design – Parte 2 (Final).

Creación de Componentes Para las Pestañas (Tabs)

Para matener un orden, creo un componente para cada pestaña o tab:

Entonces se me ha creado 3 directorios nuevos para las pestañas:

Ahora pasemos a crear su contenido.

Contenido de las Pestañas (Tabs)

Ya que tenemos creados los 3 componentes para las pestañas del proyecto, vamos a crear un sencillo contenido en cada una de ellas. Agregaremos un texto sencillo que indica en que pestaña se encuentra el usuario.

Pestaña 1

Abro el archivo llamado tab1.component.html y le agrego el siguiente contenido:

Tu le puedes agregar el contenido que desees.

Pestaña 2

Abro el archivo llamado tab2.component.html y le agrego el siguiente contenido:

Le puedes agregar el contenido que desees.

Pestaña 3

Igualmente abro el archivo llamado tab3.component.html y le agrego lo siguiente:

Con ello tenemos el contenido de las 3 pestañas.

Configuraciones Adiciones

Abro el archivo styles.css que se encuentra en src > app > styles.css:

Y le agrego lo siguiente (He colocado comentarios para explicar que hace cada línea de código CSS):

Eso es todo, si vamos al navegador podemos ver nuestras pestañas funcionando:

Como mencione al inicio de este tutorial, las pestañas te permiten ordenar el contenido y generar una buena experiencia en los usuarios.

Conclusión

En este post hemos aprendido a usar Angular y Material Desing, ambos son la pareja perfecta para desarrollar proyectos con Angular. También puedes optar por usar Bootstrap 5, Tailwind CSS y y otros framework o herramientas que te permitan crear interfaces de usuario. Con lo aprendido en este tutorial, podrás crear proyectos más avanzados.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Subscribirse
Notificar a
guest

0 Comments
Inline Feedbacks
View all comments