guia iônica (guia)
guia iônica (Tab) é alinhada horizontalmente botões ou links para navegar entre mudar as páginas. Ele pode conter uma combinação de texto e ícones em um dispositivo móvel é um método popular de navegação.
Use as seguintes classes container guias guias, cada guia usando a classe tab-item. Por padrão, a guia é o texto e nenhum ícone.
Exemplos
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
Por padrão, a cor guia é o padrão, você pode definir os seguintes estilos de cores diferentes: Abas-padrão, as guias de luz, BAT-estáveis, BAT-positivos, BAT-calmas, guias equilibrada, BAT-energizados, guias-afirmação, abas -Royal, guias-escuro.
Para ocultar a barra de abas, você pode usar guias-item-hide classe.
guia ícone
Após a classe para adicionar guias guias-icon-only aulas pode ser configurado para exibir somente a guia ícone.
<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>
Top ícone do separador de texto +
Após a classe para adicionar guias classe guias-icon-top ícone + texto pode ser fixado na parte superior da guia.
<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>
À esquerda do separador ícone + texto
ícone após a classe para adicionar guias guias-icon-esquerda, no lado esquerdo da classe pode ser definido como guia 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>
guia Estilo Listrado
Você pode adicionar padrão de guias-listradas no nome do elemento com guias para alcançar guias de estilo como Android. Você também pode adicionar guias-top para alcançar a guia na parte superior da página.
Listras cor da guia pode ser controlado por guias-fundo {color} e guias-color- {color}, {color} valor pode ser: padrão, luz, estável, positivo, calmo, equilibrado, energizado, assertivo, real ou escuro.
Nota: Se a cabeça do título na guia novamente, você precisa usar a classe tem-tabs-top.
<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>
Os resultados operacionais são os seguintes: