Ionic - 標籤頁

Ionic 標籤頁通常用於移動導航。樣式針對不同平臺進行了最佳化。這意味著在 Android 裝置上，標籤頁將位於螢幕頂部，而在 iOS 裝置上則位於底部。建立標籤頁的方法有很多種。本章將詳細介紹如何建立標籤頁。

簡單的標籤頁

簡單的標籤頁選單可以使用tabs類建立。對於使用此類的內部元素，我們需要新增tab-item元素。由於標籤頁通常用於導航，因此我們將對標籤頁專案使用<a>標籤。下面的示例顯示了一個包含四個標籤頁的選單。

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

以上程式碼將生成以下螢幕：

新增圖示

Ionic 提供了用於向標籤頁新增圖示的類。如果希望標籤頁僅包含圖示而沒有文字，則應在tabs類之後新增tabs-icon-only類。當然，您需要新增要顯示的圖示。

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

以上程式碼將生成以下螢幕：

您還可以同時新增圖示和文字。tabs-icon-top和tabs-icon-left類分別將圖示放置在文字上方或左側。實現方式與上述示例相同，我們只需新增一個新類和我們要使用的文字即可。以下示例顯示了放置在文字上方的圖示。

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

以上程式碼將生成以下螢幕：

條紋標籤頁

條紋標籤頁可以透過在我們的標籤頁周圍新增一個包含tabs-striped類的容器來建立。此類允許使用tabs-background和tabs-color字首將一些 Ionic 顏色新增到標籤頁選單。

在下面的示例中，我們將使用tabs-background-positive（藍色）類來設定選單的背景樣式，並使用tabs-color-light（白色）類來設定標籤頁圖示的樣式。請注意，活動標籤頁與其他兩個非活動標籤頁之間的區別。

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

以上程式碼將生成以下螢幕：