使用小工具 > 2D > 標籤 (Tabs)
  
標籤 (Tabs)
此小工具的功能為何？
「標籤」小工具為特殊類型的容器。小工具內的每個標籤都有自己的內容。雖然所有標籤都會載入自己的內容以供快速切換標籤，但一次僅能看一個標籤。
使用此小工具的時機？
當您想達到較高水準的內容組織，例如切換體驗的檢視、資料集合或功能等方面時，即可使用「標籤」。舉例來說，如果您要顯示某輛卡車共 3 種不同型號的資料，則可透過「標籤」讓體驗檢視者輕鬆切換此 3 種型號。
還有任何特殊屬性、服務、事件、操作嗎？
欲檢視通用的小工具屬性、服務、事件等清單，可參閱 共通的小工具屬性、服務、事件。
下表列出此小工具專屬的屬性、服務以及事件。
屬性
JavaScript
類型
描述
標籤方向
taborientation
string
選取「垂直」或「水平」。
* 
當切換此兩個選項時，並不會更改 Vuforia Studio 中的方向。欲檢視更改，您必須預覽體驗。
標籤邊框間距
tabpadding
string
設定容器的標籤與標籤內容之邊框距離。請依支援格式之一輸入數字 (例如 10px)：
• px
• %
• in
• mm
• cm
• ex
• em
• pt
• pc
如果您要設定不同標籤內容的邊框距離，則可在專案樹狀目錄中分別選取並編輯其邊框距離屬性。
索引標籤帶分類
stripclass
string
針對標籤帶或標籤列特別指定類別。
事件
JavaScript
描述
索引標籤點擊
clicktab
在專案樹狀目錄中拖曳「索引標籤點擊」事件模型。按一下「索引標籤點擊」事件旁邊的 JS 圖示，以輸入運算式。
此小工具可提供下列操作。
• 新增標籤
如果新增標籤，即會在標籤顯示下列內容：
屬性
JavaScript
類型
描述
標題
title
string
標籤上顯示的文字。
操作中的小工具
此範例為小工具可能的外觀！
使用所必須的最少步驟
近似外觀
1. 拖曳「標籤」小工具至畫布上。
2. 按一下「新增標籤」即可新增任意數量的標籤。在此範例中，我們新增兩個標籤。
3. 選取一個標籤，並輸入您要在「標題」欄位中顯示的標籤名稱。
4. 針對您所要顯示的小工具，將之拖曳至顯示「標籤內容」的標籤之上。
使用 CSS 對小工具進行樣式化處理
您可使用 CSS 對小工具進行樣式化處理！以下為 CSS 類別範例，您可進行建立並套用︰
* 
請記住，最好為類別指定唯一名稱，從而不與其他類別或 OOTB 屬性相衝突。
CSS 範例
近似外觀
.ptc-tabs .tab-strip-item {
font-size: 25px;
}
如需有關實行 CSS 類別的詳細資訊，請參閱 應用程式樣式。