Ionic - JavaScript 選項卡

選項卡是任何導航型別或在應用內選擇不同頁面的一種實用模式。相同的選項卡將在 Android 裝置的螢幕頂部顯示，在 iOS 裝置的底部顯示。

使用選項卡

可以透過使用 **ion-tabs** 作為容器元素和 **ion-tab** 作為內容元素來將選項卡新增到應用中。我們將將其新增到 **index.html** 中，但可以將其新增到應用中的任何 HTML 檔案中。只需確保不要將其新增到 **ion-content** 內，以避免由此帶來的 CSS 問題。

index.html 程式碼

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

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

輸出將如下面的螢幕截圖所示。

**ion-tab** 元素有可用的 API。可以將其作為屬性新增，如上例所示，我們在其中使用了 **title**、**icon-on** 和 **icon-off**。後兩個用於區分選定的選項卡與其他選項卡。如果檢視上面的圖片，可以看到第一個選項卡被選中。可以在下表中檢視其餘屬性。

選項卡屬性

屬性	型別	詳情
title	字串	選項卡的標題。
href	字串	用於選項卡導航的連結。
icon	字串	選項卡的圖示。
icon-on	字串	選中時選項卡的圖示。
icon-off	字串	未選中時選項卡的圖示。
badge	表示式	選項卡的徽章。
badge-style	表示式	選項卡的徽章樣式。
on-select	表示式	選中選項卡時呼叫
on-deselect	表示式	取消選中選項卡時呼叫
hidden	表示式	用於隱藏選項卡。
disabled	表示式	用於停用選項卡。

選項卡也有自己的委託服務，以便更輕鬆地控制應用中的所有選項卡。它可以注入到控制器中，並具有一些方法，如下表所示。

委託方法

方法	引數	型別	詳情
selectedIndex()	/	數字	返回選定選項卡的索引。
$getByHandle(parameter1)	控制代碼	字串	用於將方法連線到具有相同控制代碼的特定選項卡檢視。可以透過使用 delegate-handle = "my-handle" 屬性將控制代碼新增到 ion-tabs。$ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();

列印頁面