Latest web development tutorials

Operação da barra de guia iônica

íon-guias

íon-guias são um conjunto de guias de página na barra de abas. Você pode mudar as páginas, clicando sobre a opção.

Para iOS, ele aparecerá na parte inferior da tela, o Android vai aparecer no topo da tela (abaixo da barra de navegação).

uso 

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

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

O efeito é o seguinte:

API

propriedade tipo detalhe
delegado-handle
(Opcional)
字符串

O punho com $ionicTabsDelegate para identificar essas guias.

ião-guia

affiliated ionTabs

Ele contém um teor de guia. Este conteúdo só existe em uma determinada guia selecionada.

Cada um tem seu próprio histórico de navegação ionTab.

uso 

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

API

propriedade tipo detalhe
título 字符串

título da guia.

href
(Opcional)
字符串

Mas quando você toca na guia saltará links.

ícone
(Opcional)
字符串

ícone do separador. Se um determinado valor, torna-se o íon-on padrão e ion-off de.

ícone-on
(Opcional)
字符串

ícone tag selecionada.

icon-off
(Opcional)
字符串

Não seleccionado ícone de marca.

crachá
(Opcional)
表达式

guia emblema (geralmente um número).

crachá de estilo
(Opcional)
表达式

guia estilos Micro-Cap (por exemplo, guias-positivos).

on-select
(Opcional)
表达式

É acionado quando a guia selecionada.

on-deselect
(Opcional)
表达式

Desencadear guia Quando estiver desligada.

ng-click
(Opcional)
表达式

Normalmente, guia quando clicado serão selecionados. Se o ng-Click, não será selecionado. Você pode usar US $ ionicTabsDelegate.select () para especificar o rótulo switch.

$ IonicTabsDelegate

Autorização de instruções ionTabs controlo.

Este método chamar diretamente de serviço $ ionicTabsDelegate, controlar toda a instrução ionTabs. Com o método de controlar $ getByHandle ionTabs exemplo específico.

uso 

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      你好，标签1！
      <button ng-click="selectTabWithIndex(1)">选择标签2</button>
    </ion-tab>
    <ion-tab title="Tab 2">你好标签2！</ion-tab>

  </ion-tabs>
</body>

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

caminho 

select(index, [shouldChangeHistory])

Selecione a guia para corresponder ao índice especificado.

parâmetros tipo detalhe
índice 数值

Selecione a guia índice.

shouldChangeHistory
(Opcional)
布尔值

Se esta opção deve carregar o histórico de navegação deste tag (se houver), bem como a utilização, ou a carga apenas a página padrão. O padrão é falso. Dica: Se um ion-nav-view na placa opcional, pode ser necessário para defini-la como verdadeira. 

selectedIndex()

Valor de retorno: Valor está selecionado índice tag, como -1.

$getByHandle(handle)
parâmetros tipo detalhe
manusear 字符串

Por exemplo: 

$ionicTabsDelegate.$getByHandle('my-handle').select(0);