ionic tab (pestañas)

Las pestañas de ionic (ionic tab) son botones o enlaces dispuestos horizontalmente que se utilizan para cambiar la navegación entre páginas. Pueden contener una combinación de texto e iconos, y son un método de navegación popular en dispositivos móviles.

El siguiente contenedor de pestañas utiliza la clase tabs, y cada pestaña usa la clase tab-item. De forma predeterminada, las pestañas son de texto y no tienen iconos.

Ejemplo

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

De forma predeterminada, el color de las pestañas es el predeterminado. Puedes establecer los siguientes estilos de color diferentes: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

Para ocultar la barra de pestañas, usa la clase tabs-item-hide.

Pestañas con iconos

Añade la clase tabs-icon-only después de la clase tabs para configurar que solo se muestren iconos en las pestañas.

<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-gear-a"></i>
  </a>
</div>

Pestañas con icono superior + texto

Añade la clase tabs-icon-top después de la clase tabs para configurar pestañas con icono superior + texto.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="../index.html">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Pestañas con icono izquierdo + texto

Añade la clase tabs-icon-left después de la clase tabs para configurar pestañas con icono izquierdo + texto.

<div class="tabs tabs-icon-left">
  <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-gear-a"></i>
    设置
  </a>
</div>

Pestañas de estilo rayado

Puedes añadir tabs-striped a un elemento con el nombre de clase tabs para lograr pestañas de estilo Android. También puedes añadir tabs-top para colocar las pestañas en la parte superior de la página.

El color de las pestañas rayadas se puede controlar con tabs-background-{color} y tabs-color-{color}. Los valores de {color} pueden ser: default, light, stable, positive, calm, balanced, energized, assertive, royal o dark.

Nota: si deseas establecer un título de encabezado en las pestañas, necesitas usar la clase has-tabs-top.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

El resultado de la ejecución es el siguiente:

Otras extensiones