Simular tabs en Ionic 3 con Ionic Segments
Simular tabs en Ionic 3 con Ionic Segments


En esta entrada vamos a ver cómo podemos crear una página para simular tabs en Ionic 3, estoy seguro de que más de una vez tendrás que desarrollar alguna aplicación la cual tenga que mostrar en una misma vista varias “páginas”.

Para conseguir esto lo primero que nos viene a la cabeza es utilizar Tabs, el problema es que no podemos utilizar tabs dentro de un ion-content, así que queda descartada la opción, la mejor opción es utilizar Ionic Segments, este componente nos permite añadir una serie de botones y cada uno de ellos estará vinculado a un contenedor el cual se mostrará en el caso en el que le corresponda.

Simular tabs en Ionic 3 con Ionic Segments

Utilizar Ionic Segments es muy sencillo, simplemente debemos utilizar la directiva ion-segment y definir cada ion-segment-button que necesitemos, es importante añadir al ion-segment un [(ngModel)] y a cada ion-segment-button un value ya que será la forma en la que Ionic sepa que contenido debe mostrar en cada caso, el siguiente ejemplo es útil para añadir los botones.


Con el código anterior tenemos 3 botones, ahora sólo necesitamos añadir un trozo de html para mostrar el contenido correcto depende del modelo de nuestro ion-segment.


Cómo puedes ver, lo único que necesitamos hacer para mostrar el contenido correcto en cada caso es utilizar un ngSwitch utilizando el modelo de datos mymodel, de esta forma podemos crear interfaces muy potentes de forma sencilla simulando Tabs en Ionic 3 utilizando Ionic Segments, espero que te haya gustado.

Curso de Ionic 3

Accede ahora al curso de Ionic 3 por sólo 10€ con acceso para siempre.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.