Latest web development tutorials

Операция вкладка ионная бар

ионно-табс

ионно-табс представляют собой набор вкладок страниц в панели вкладок. Вы можете переключать страницы, нажав на опцию.

Для IOS, он появится в нижней части экрана, Android появится в верхней части экрана (под панелью навигации).

использование 

<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>

Эффект выглядит следующим образом:

API

свойство тип деталь
Делегат-ручка
(Необязательно)
字符串

Ручка с $ionicTabsDelegate для идентификации этих вкладок.

ионно-вкладка

Аффилированные ionTabs

Он содержит содержимое вкладки. Это содержание существует только в той или иной выбранной вкладке.

Каждый из них имеет свою собственную ionTab историю просмотра.

использование 

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

API

свойство тип деталь
название 字符串

Вкладка название.

HREF
(Необязательно)
字符串

Но когда вы касаетесь вкладка будет прыгать ссылки.

значок
(Необязательно)
字符串

Вкладка значок. Если при заданном значении, оно становится значением по умолчанию ионно-на и ионно-офф.

Значок-на
(Необязательно)
字符串

Выбранные теги иконок.

Значок-офф
(Необязательно)
字符串

Не выбран значок тега.

значок
(Необязательно)
表达式

Вкладка Знак (как правило, это число).

Значок стиля
(Необязательно)
表达式

Вкладка Стили Micro-Cap (например, вкладки-положительных).

на выбор
(Необязательно)
表达式

Срабатывает, когда вкладка выбрана.

на Deselect
(Необязательно)
表达式

Trigger вкладку Если флажок снят.

нг-клик
(Необязательно)
表达式

Как правило, будет выбран при нажатии на вкладку. Если нг-Click, он не будет выбран. Вы можете использовать $ ionicTabsDelegate.select (), чтобы указать метку коммутатора.

$ IonicTabsDelegate

Авторизация управления ionTabs инструкция.

Этот метод прямого вызова службы $ ionicTabsDelegate, контролировать все инструкции ionTabs. С помощью метода $ getByHandle контроля конкретного экземпляра ionTabs.

использование 

<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);
  }
}

способ 

select(index, [shouldChangeHistory])

Выберите вкладку, чтобы соответствовать данный показатель.

параметры тип деталь
индекс 数值

Выберите вкладку индекса.

shouldChangeHistory
(Необязательно)
布尔值

Если эта опция должна загрузить историю просмотра этого тега (если он присутствует), а также использование или загрузка только страницы по умолчанию. По умолчанию является ложным. Совет: Если ion-nav-view на дополнительной плате, возможно , потребуется установить его в действительности. 

selectedIndex()

Возвращаемое значение: Значение выбирается тег индекса, например -1.

$getByHandle(handle)
параметры тип деталь
ручка 字符串

Например: 

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