O melhor tutorial guia iônica (guia) em 2024. Neste tutorial você pode aprender 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.
<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.
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>
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>
í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>
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: