operasi bar tab ionik


ion-tabs

ion-tabs ialah bar tab yang terdiri daripada set tab halaman. Anda boleh menukar halaman dengan mengklik pada pilihan.

Untuk iOS, ia akan muncul di bahagian bawah skrin dan pada Android, ia akan muncul di bahagian atas skrin (di bawah bar navigasi).

Penggunaan

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


Kesannya adalah seperti berikut:

API

< tr class="firstRow">
AtributJenisButiran
wakilkan - pemegang
(pilihan)
String
属性类型详情
delegate-handle
(可选)
字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。

Hendal menggunakan $ionicTabsDelegate untuk mengenal pasti tab ini.

ion-tab

Milik ionTabs

Mengandungi kandungan tab. Kandungan hanya wujud dalam tab tertentu yang dipilih.

Setiap ionTab mempunyai sejarah penyemakan imbasnya sendiri.

Penggunaan

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

API
属性类型详情
title字符串

选项卡的标题。

href
(可选)
字符串

但触碰的时候，该选项卡将会跳转的的链接。

icon
(可选)
字符串

选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。

icon-on
(可选)
字符串

被选中标签的图标。

icon-off
(可选)
字符串

没被选中标签的图标。

badge
(可选)
表达式

选项卡上的徽章（通常是一个数字）。

badge-style
(可选)
表达式

选项卡上微章的样式（例，tabs-positive ）。

on-select
(可选)
表达式

选项卡被选中时触发。

on-deselect
(可选)
表达式

选项卡取消选中时触发。

ng-click
(可选)
表达式

通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。

< td ><🎜>Tajuk tab. <🎜>
AtributJenis< /th>Butiran
tajukString
href
(pilihan)
String <🎜>Tetapi apabila disentuh, tab akan melompat ke pautan. <🎜>
ikon
(pilihan)
String <🎜>Ikon tab. Jika nilai diberikan, ia menjadi nilai lalai untuk ion-on dan ion-off. <🎜>
ikon-on
(pilihan)
String <🎜>Ikon teg yang dipilih. <🎜>
ikon dimatikan
(pilihan)
Rentetan <🎜>Ikon teg yang tidak dipilih. <🎜>
lencana
(pilihan)
ungkapan <🎜>Lencana pada tab (biasanya nombor). <🎜>
gaya lencana
(pilihan)
ungkapan <🎜>Gaya bab mikro pada tab (contohnya, tab-positif). <🎜>
pada pilihan
(pilihan)
ungkapan <🎜>Dicetuskan apabila tab dipilih. <🎜>
pada-nyahpilih
(pilihan)
ungkapan <🎜>Menyala apabila tab dinyahtanda. <🎜>
ng-klik
(pilihan)
Ungkapan <🎜>Biasanya, tab akan dipilih apabila diklik. Jika ng-Click ditetapkan, ia tidak akan dipilih. Anda boleh menggunakan $ionicTabsDelegate.select() untuk menentukan tab bertukar. <🎜>

$ionicTabsDelegate

Membenarkan arahan ionTabs.

Kaedah ini memanggil terus perkhidmatan $ionicTabsDelegate untuk mengawal semua arahan ionTabs. Gunakan kaedah $getByHandle untuk mengawal kejadian ionTabs tertentu.

Penggunaan

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

Kaedah

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

Pilih tag untuk memadankan indeks yang diberikan.

ParameterJenisButiran
indeksNilai
参数类型详情
index数值

选择标签的索引。

shouldChangeHistory
(可选)
布尔值

此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。

Pilih indeks teg.

sepatutnyaChangeHistory
(pilihan)
Nilai Boolean Pilihan ini harus sama ada sejarah penyemakan imbas untuk tab ini (jika ada) harus dimuatkan dan digunakan, atau hanya halaman lalai harus dimuatkan. Lalai adalah palsu. Petua: Jika ion-nav-view berada dalam tab, anda mungkin perlu menetapkannya kepada benar. 

select(index, [shouldChangeHistory])
参数类型详情
handle字符串

Nilai pulangan:

Nombor, indeks teg yang dipilih, seperti -1. 
selectedIndex()
<🎜><🎜> Contohnya: <🎜>
$getByHandle(handle)
<🎜>