Ionic - guias Javascript

As guias são um padrão útil para qualquer tipo de navegação ou seleção de páginas diferentes dentro de seu aplicativo. As mesmas guias aparecerão na parte superior da tela para dispositivos Android e na parte inferior para dispositivos IOS.

Usando guias

As guias podem ser adicionadas ao aplicativo usando ion-tabs como um elemento de contêiner e ion-tabcomo um elemento de conteúdo. Vamos adicioná-lo aoindex.html, mas você pode adicioná-lo a qualquer arquivo HTML dentro do seu aplicativo. Apenas certifique-se de não adicioná-lo dentro doion-content para evitar problemas de CSS que o acompanham.

index.html Code

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

A saída terá a aparência mostrada na captura de tela a seguir.

Existe API disponível para ion-tabelementos Você pode adicioná-lo como atributos como mostrado no exemplo acima, onde usamostitle, icon-on e icon-off. Os dois últimos são usados ​​para diferenciar a guia selecionada do resto. Se você olhar para a imagem acima, verá que a primeira guia está selecionada. Você pode verificar o restante dos atributos na tabela a seguir.

Atributos de guia

Atributo	Tipo	Detalhes
título	corda	O título da guia.
href	corda	O link usado para navegação em guias.
ícone	corda	O ícone da guia.
ícone	corda	O ícone da guia quando selecionado.
ícone desligado	corda	O ícone da guia quando não selecionado.
distintivo	expressão	O emblema da guia.
estilo distintivo	expressão	O estilo do emblema para a guia.
na seleção	expressão	Chamado quando a guia é selecionada
ao desmarcar	expressão	Chamado quando a guia é desmarcada
escondido	expressão	Usado para ocultar a guia.
Desativado	expressão	Usado para desativar a guia.

As guias também têm seu próprio serviço de delegação para facilitar o controle de todas as guias dentro do aplicativo. Pode ser injetado no controlador e possui diversos métodos, que são mostrados na tabela a seguir.

Métodos de delegação

Método	Parâmetros	Tipo	Detalhes
selectedIndex ()	/	número	Retorna o índice da guia selecionada.
$ getByHandle (parâmetro1)	lidar com	corda	Usado para conectar métodos à visualização de guia específica com o mesmo identificador. Alça pode ser adicionada aion-tabs usando delegate-handle = "my-handle" atributo. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();