Latest web development tutorials

tab ionik bar operasi

ion-tab

ion-tab adalah seperangkat tab halaman di tab bar. Anda dapat mengganti halaman dengan mengklik opsi.

Untuk iOS, itu akan muncul di bagian bawah layar, Android akan muncul di bagian atas layar (bawah bar navigasi).

pemakaian 

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

Efeknya adalah sebagai berikut:

API

milik jenis Detil
delegasi-handle
(Opsional)
字符串

Pegangan dengan $ionicTabsDelegate untuk mengidentifikasi tab ini.

ion-tab

berafiliasi ionTabs

Ini berisi konten tab. konten ini hanya ada di tab yang dipilih diberikan.

Masing-masing memiliki riwayat browsing ionTab sendiri.

pemakaian 

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

API

milik jenis Detil
judul 字符串

judul tab.

href
(Opsional)
字符串

Tapi ketika Anda menyentuh tab akan melompat link.

icon
(Opsional)
字符串

ikon tab. Jika nilai yang diberikan, itu menjadi ion-on default dan ion-off.

icon-on
(Opsional)
字符串

Dipilih tag ikon.

icon-off
(Opsional)
字符串

Tidak dipilih ikon tag.

lencana
(Opsional)
表达式

tab Badge (biasanya angka).

lencana bergaya
(Opsional)
表达式

tab gaya Micro-Cap (misalnya, tab-positif).

on-pilih
(Opsional)
表达式

Kebakaran ketika tab yang dipilih.

on-membatalkan pilihan
(Opsional)
表达式

Memicu tab Ketika dicentang.

ng-klik
(Opsional)
表达式

Biasanya, tab ketika diklik akan dipilih. Jika ng-klik, tidak akan dipilih. Anda dapat menggunakan $ ionicTabsDelegate.select () untuk menentukan label switch.

$ IonicTabsDelegate

Otorisasi ionTabs kontrol instruksi.

Metode ini langsung menghubungi layanan $ ionicTabsDelegate, mengendalikan semua instruksi ionTabs. Dengan metode $ getByHandle mengendalikan ionTabs tertentu misalnya.

pemakaian 

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

cara 

select(index, [shouldChangeHistory])

Pilih tab untuk mencocokkan indeks yang diberikan.

parameter jenis Detil
indeks 数值

Pilih tab indeks.

shouldChangeHistory
(Opsional)
布尔值

Jika opsi ini harus memuat riwayat browsing dari tag ini (jika ada), dan penggunaan, atau beban hanya halaman default. default adalah palsu. Tip: Jika ion-nav-view di kartu pilihan, Anda mungkin perlu mengaturnya untuk benar. 

selectedIndex()

Kembali Nilai: Nilai dipilih indeks tag, seperti -1.

$getByHandle(handle)
parameter jenis Detil
menangani 字符串

Sebagai contoh: 

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