Los tabs son unos de los elementos que más se utilizan en la navegación móvil y cuyo estilo depende de las diferentes plataformas.

Consisten en en una región horizontal de botones o enlaces que permiten una mejor experiencia de usuario a la hora de navegar entre pantallas.

Los tabs en ionic pueden estar compuestos por texto, iconos, o una combinación de ambos. De este modo vamos a ir viendo cómo crear dichos tabs e incluso a darles estilos en esta entrada.

Tabs simples

Para crear tabs sencillos, debemos de crear un div con la clase tabs, y dentro lo único que debemos de hacer es introducir enlaces con las clase tab-item.

En el siguiente ejemplo podemos ver como funciona perfectamente

<div class = "tabs">
  <a class = "tab-item">
    Tab 1
  </a>
  <a class = "tab-item">
    Tab 2
  </a>
  <a class = "tab-item">
    Tab 3
  </a>
</div>

Tabs con iconos

Los tabs en ionic pueden estar identificados por iconos, para lo que debemos de introducir dentro de nuestro div la clase tabs-icon-only y luego dentro de cada enlace introducir una etiqueta i con las clases icon y el nombre del icono de ionic.

Los iconos de ionic podemos verlos en la documentación oficial.

Con el siguiente código:

<div class = "tabs tabs-icon-only">
  <a class = "tab-item">
    <i class = "icon ion-home"></i>
  </a>
  <a class = "tab-item">
    <i class = "icon ion-star"></i>
  </a>
  <a class = "tab-item">
    <i class = "icon ion-power"></i>
  </a>
</div>

Obtendremos el siguiente resultado

Iconos y texto bajo el icono

Ionic nos permite introducir texto bajo los iconos, para ellos tan solo hay que cambiar las clase tabs-icon-only por tabs-icon-top y tras esto introducir texto despues de la etiqueta i de cada tab:

<div class = "tabs tabs-icon-top">
  <a class = "tab-item">
    <i class = "icon ion-home"></i>
    Tab 1
  </a>
  <a class = "tab-item">
    <i class = "icon ion-star"></i>
    Tab 2
  </a>
  <a class = "tab-item">
    <i class = "icon ion-planet"></i>
    Tab 3
  </a>
</div>

Se puede poner el icono a la izquierda del texto usando tabs-icon-left

Introduciendo color y estilos a los tabs

Hasta ahora los tabs que hemos usado son aquellos que ionic utiliza por defecto, pero podemos introducirles colores tanto de fondo como de los propios iconos, para ello debemos envolver todo el tab con otro div que tenga la clase tabs-striped y usar las siguientes clases:

• tabs-background-[color]: es el color que tendrá el fondo de los tabs, un ejemplo sería; tabs-background-energized
• tabs-color-[color]: elige el color de los iconos

Los colores son aquellos que están definidos por ionic, ya sean los que están por defecto o configurados por nosotros.

<div class="tabs-striped tabs-top tabs-background-energized tabs-color-light">
<div class="tabs">
    <a class="tab-item active" href="#">
      <i class="icon ion-home"></i>
      Test
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-star"></i>
      Favorites
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-a"></i>
      Settings
    </a>
</div>
</div>
<div class="tabs-striped tabs-color-royal">
<div class="tabs">
    <a class="tab-item active" href="#">
      <i class="icon ion-home"></i>
      Test
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-star"></i>
      Favorites
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-a"></i>
      Settings
    </a>
</div>
</div>

Otras clases interesantes en los tabs

Los tabs en ionic tienen algunas clases interesantes que podemos estudiar, como:

• tabs-top: esta clase se introduce en el div que envuelve a los tabs, haciendo que estos aparezcan arriba
• active: si introducimos esta clase en un enlace de los tabs, le esta diciendo a ionic que él es el tab activo, marcándolo como tal.

Si os fijáis ya hemos utilizado en los ejemplos estas clases.