Latest web development tutorials

pestaña iónica (pestaña)

pestaña iónica (Tab) está alineada horizontalmente botones o enlaces para navegar entre las páginas cambian. Puede contener una combinación de texto e iconos en un dispositivo móvil es un método popular de navegación.

Utilice las siguientes clases de contenedores pestañas tabletas, cada uno utilizando la clase-elemento de ficha. De forma predeterminada, la pestaña es el texto y ningún icono.

Ejemplos

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

Por defecto, el color de la pestaña es el valor predeterminado, puede establecer las siguientes diferentes estilos de color: fichas predeterminadas, fichas de luz, TABS-estables, TABS-positivas, TABS-calma, TABS-equilibradas, TABS-energizados, TABS-asertivas, tabs -Real, pestañas-oscuro.

Para ocultar la barra de pestañas, puede utilizar la clase pestañas-elemento de ocultación.

pestaña icono

Después de la clase para agregar pestañas pestañas-icono de sólo clases se pueden configurar para mostrar sólo la pestaña icono.

<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>

Icono superior + texto de las pestañas

Después de la clase para agregar pestañas pestañas clase-icono-top icono + texto se puede ajustar en la parte superior de la ficha.

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

Izquierdo de la pestaña icono + texto

Después de la clase icono para añadir pestañas pestañas-icono-izquierda en el lado izquierdo de la clase se puede ajustar a la pestaña de 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>

ficha Estilo de rayas

Puede añadir pestañas patrón a rayas en el nombre del elemento con pestañas para lograr pestañas de estilo como Android. También puede añadir pestañas de arriba para alcanzar la pestaña en la parte superior de la página.

Rayas de color pestaña puede ser controlado por pestañas-fondo-{color} y pestañas-color- {color}, {color} valor puede ser: por defecto, la luz y estable, positivo, tranquilo, equilibrado, lleno de energía, asertivo, real o oscura.

Nota: Si la cabeza del título de la ficha de nuevo, es necesario utilizar la clase tiene las pestañas de la parte superior.

<div class="tabs-striped tabs-top tabs-background-positive 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-assertive">
    <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>

Los resultados de operación son los siguientes: