operación de la barra de pestañas iónica
ion-pestañas
ion-pestañas son un conjunto de fichas de página en la barra de pestañas. Puede cambiar de página haciendo clic en la opción.
Para iOS, que aparecerá en la parte inferior de la pantalla, Android aparecerá en la parte superior de la pantalla (por debajo de la barra de navegación).
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>
El efecto es el siguiente:
API
| propiedad | tipo | detalle |
|---|---|---|
| delegado mango (Opcional) | 字符串 | El mango con |
ión-tab
afiliadas ionTabs
Contiene un contenido pestaña. Este contenido sólo existe en una pestaña seleccionada dado.
Cada uno tiene su propio historial de navegación ionTab.
uso
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
API
| propiedad | tipo | detalle |
|---|---|---|
| título | 字符串 | título de la pestaña. |
| href (Opcional) | 字符串 | Pero cuando se toca la ficha saltará enlaces. |
| icono (Opcional) | 字符串 | icono de pestaña. Si un valor dado, se convierte en el ion-ion de defecto y-fuera de. |
| icono en (Opcional) | 字符串 | Icono de etiqueta seleccionada. |
| icono-off (Opcional) | 字符串 | No seleccionado icono de etiqueta. |
| divisa (Opcional) | 表达式 | pestaña insignia (por lo general un número). |
| del estilo distintivo (Opcional) | 表达式 | pestaña estilos Micro-Cap (por ejemplo, pestañas-positivas). |
| en-select (Opcional) | 表达式 | Se activa cuando la pestaña seleccionada. |
| en deselect (Opcional) | 表达式 | Desencadenar pestaña Cuando no está marcada. |
| ng-clic (Opcional) | 表达式 | Por lo general, se seleccionará la pestaña cuando se hace clic. Si el ng-Click, no va a ser seleccionado. Puede utilizar ionicTabsDelegate.select $ () para especificar la etiqueta del interruptor. |
$ IonicTabsDelegate
Autorización ionTabs de control de instrucciones.
Este método llame directamente el servicio $ ionicTabsDelegate, el control de toda la instrucción ionTabs. Con el método de controlar $ getByHandle ejemplo ionTabs específica.
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);
}
}
camino
select(index, [shouldChangeHistory])
Seleccione la pestaña para que coincida con el índice dado.
| parámetros | tipo | detalle |
|---|---|---|
| índice | 数值 | Seleccione la pestaña de índice. |
| shouldChangeHistory (Opcional) | 布尔值 | Esta opción debe ser cargado si esta historia etiqueta de navegación (si lo hay), y el uso, o la carga sólo la página por defecto. El valor por defecto es falso. Consejo: Si un |
selectedIndex()
Valor de retorno: Valor se selecciona el índice de tag, como -1.
$getByHandle(handle)
| parámetros | tipo | detalle |
|---|---|---|
| manejar | 字符串 |
Por ejemplo:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);