Navegación por Tabs

Clase 15 de 36 • Curso Básico de Ionic 2018

Clase anteriorSiguiente clase

Pedro Ramón Sánchez Chacón

student•

Lo que son Eduardo, Leonidas, Beco y Freddy, son los mejores profesores que tiene platzi, de verdad una maravilla.

Juan C Felizzola

student•

Opino lo mismo. Son excelentes profesores

Diego Diego Cruz

student•

ciertamente

Milciades Vargas Liz

student•

las cosas cambian un poco para ionic 4 así que es mejor averiguar como se soluciona esto, aqui le dejo dos links muy útiles

Alfonso Navarro

company_admin•

Gracias compañero por su aporte, porq ya toca meternos en esta ultima versión.

Claudia Ibarra

student•

Te agradezco tu aporte, he pasado horas buscando cómo se implementan ciertas cosas en Ionic 4, creo que de nada sirve seguir el curso en la versión 3 para evitar problemas, ésto se trata de mantenerse actualizados y hay que buscar soluciones.

Fabiola Dayana Acarapi Alvarez

student•

Link de los botones

Mauricio Rivera

student•

El sistema de rutas cambia bastante en el ionic actual, guiense de este video para las tabs: https://www.youtube.com/watch?v=_BnCRIZ1nDk

Jose Florian

student•

Actualicen este curso por favor, si es así con este curso como sera con otros?

Juan Carlos Castillo Gómez

student•

Es verdad, esto esta desactualizado, ami me ocurrio lo mismo y entonces quien responde????

José Manuel Casani Guerra

student•

Ionic 4 salio recien en Enero del 2019, y hace unos meses todavia tenia problemas , bueno aun lo tiene con el tema del capacitor por no tiene todos su plugins correctos.

Además , antes de un curso de Ionic 4 se debió sacar el curso de Angular 6+ que ya lo hicieron. Ya que Ionic cambia todo a un nivel más compatible para Angular , Vue y React.

PD: Por favor , evitar suposiciones, ya que son algo tontas y irrelevantes , es como decir "Han atrapado un ladron en X ciudad, asi que todos los de la ciudad son ladrones" eso es una gran falacia

Marco Antonio Orta Bustamante

student•

Mas información acerca de los Tabs:

Nathaly Stefani Riaño Bejarano

student•

Cada Tab tiene su propio Stack en donde se agregan/eliminan vistas de acuerdo con la navegación.
En ésta clase aprendí:

La Toolbar de Tabs es diferente al Footer.
Según el orden de los <ion-tab> en tabs.html, se asignará la página principal de la app.

Julio Yacot

student•

Cómo podría hacer que los tabs estuviesen disponible únicamente para algunas vistas y no para toda la app?

Irving Sarmiento

student•

Establece tu root a otra page y cuando necesites las tabs haces el push

Carlos Uriel de Jesus Sánchez González

student•

muy interesante lo de los tabs y guarde su estado.

David Eliezer Orantes González

student•

Es correcto, este comportamiento es muy util

Juan C Felizzola

student•

Para consultar los iconos que nos brinda ionicons:

David Luna

student•

Alguien sabe como colocar imágenes en los tabs?

Rafael Eldanoy Ensuncho Bechara

student•

ionic generate Page Perfil

ionic generate Page tabs

Matias Nicolas

student•

Tengo una consulta, el tema de agregar los iconos se necesita tener instalado Cordova?? Porque quiero intentar el ejercicio y no lo muestran a dichos iconos y en consola me muestra que no se podrá mostrar los iconos ya que Cordova no esta disponible.

Zarkys Salas

student•

Habia dejado el <ion-content> y por alguna razon si no lo indicaba dentro del content, me aparecia una página en blanco, y no me mostraba los tabs como tal.

Quitando el <ion-content> o colocando los tabs dentro del mismo, si hace que pueda aparecer el contenido de los tabs. Si a alguien más le ha sucedido.

Claudio Ariel Sosa

student•

Consulta
Estoy implementando tabs como indica el video pero tengo este error
Error
Typescript Error
Cannot find name ‘HomePage’.
src/pages/tabs/tabs.ts
export class TabsPage {
tab1Root= HomePage;
tab2Root= PerfilPage;
Typescript Error
Cannot find name ‘PerfilPage’.
src/pages/tabs/tabs.ts
tab1Root= HomePage;
tab2Root= PerfilPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {

Pedro Ramón Sánchez Chacón

student•

Hola amigo, recuerda importar lo que estés usando, fíjate que este todo como a continuación:

app.component.ts:

tabs.ts

app.module.ts

Claudio Ariel Sosa

student•

Gracias, me faltaba un parte de import.

Solucionado.

Recomiendo al tutor subir en la sección archivos estos documentos .ts, ya que en los videos los import se hacen automaticamente entiendo y se muestran. esto confunde y entiendo deberia estar compartiro, asi los alumnos podemos visualizar el codigo para verfiicar si estamos escribiendo todo correctamente. Saludos

Luis Diego Maroto Segura

student•

Hola Eduardo, me editor de texto no completa automáticamente las declaraciones de import, he tenido problemas para entender los errores relacionados a eso, pero por fortuna voy logrando repararlos.

Juan Guillermo Perez Cardozo

student•

despues de cada video siempre nos quedara tarea, es decir ionic 3 vs 4 cambian varias cosas. a investigar

CARLOS ALFREDO ESCOBAR RUPERTI

student•

Saludos, el siguiente tutorial me sirvio para continuar con el tutorial en la version ionic4:

https://alligator.io/ionic/ionic-4-tabs/

Eder Sauco

student•

Para los que usamos ionic 4 en adelante, la configuración de la navegación cambia, y la configuración de la pagina principal, se realiza en el archivo app\app-routing.module.ts

Para mas detalle de este cambio de navegación, consultar la siguiente fuente: https://ionicframework.com/blog/navigating-the-change-with-ionic-4-and-angular-router/

Wilson Gustavo Chango Sailema

student•

ionic start geocaching tabs

(

Navegación por Tabs

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso