反饋已提交
網絡繁忙
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
「Tab組件」是一種容器，可新增多個標籤頁，每個標籤頁均支援拖入多個組件或組合，支援按照一定規則輪播或手動切換。
注：Tab 頁載入邏輯為懶載入，切換標籤頁時才載入新標籤頁的內容。
注：本文僅為大家介紹「Tab 組件」特有功能，其他屬性不贅述。
組件交互請參見：FVS組件交互屬性 。
組件動畫請參見：FVS分頁間組件動畫 。
組件屬性請參見：FVS組件樣式屬性 。
建立一張「企業戰情室範本」：
在組件區「容器」中點選或拖曳「Tab」組件到畫布，預設顯示「請將組件/組合拖入Tab內，新增的組件/組合可以在Tab標籤頁內自由佈局」。
如下圖所示：
直接拖曳組件區或本頁面中其他組件/組合到 Tab 標籤頁上方，出現提示「釋放進入Tab當前標籤頁」，鬆開滑鼠，即可將其拖入 Tab 標籤頁。
Tab 標籤頁內佈局規則和 絕對畫布 一致：
拖入組件時，組件大小不變。
組件位置若超出標籤頁左/上邊框，則組件拖入後自動對齊左/上邊框；其餘位置則以組件釋放位置為準，支援超出標籤頁右/下邊框。
若組件超出標籤頁右/下邊框，選中標籤頁或標籤頁內的組件，出現橫向/縱向捲軸（預覽時懸浮出現），可捲動查看。
注：標籤頁中支援再次拖入 Tab 組件，但最多支援 3 層 Tab 嵌套。
也支援在組件圖層列表中，拖曳組件圖層順序移入標籤頁，拖入位置預設在標籤頁中心位置。如下圖所示：
注：需將組件拖動懸浮至組件圖層中標籤頁上，即可put 命令該標籤頁。
組件移出包括以下三種方式：
直接拖曳組件到 Tab 外，出現提示「釋放移出標籤頁」，鬆開滑鼠，即可將其移出 Tab 標籤頁。此時移出的組件位置以釋放位置為準。
在組件圖層列表或 Tab 列表中，直接拖曳組件圖層順序移出 Tab 層級。此時移出的組件位置保持不變。
在 Tab 列表，懸浮組件，點選「更多>移出」即可將組件移出 Tab 。此時移出的組件預設顯示在 Tab 組件右側。
新增 Tab 組件時，自帶一個標籤頁，支援新增多個標籤頁。
右側 Tab 列表中展示所有 Tab 標籤頁和標籤頁內的組件，和左側組件圖層中展示內容一致。
標籤頁支援單獨設定「名稱」、「標題內容」、「邊框背景」、「邊框線」及「圓角半徑」。
「名稱」為實際名，預設值為「標籤頁X_TabX_頁面X」。
「標題內容」為顯示名，預設值為「標籤頁X」。
注1：「標題內容」為 V2.10.0 版本新增。歷史範本的「標題內容」取原「名稱」的值。
注2：Tab 組件名稱、Tab 標籤頁名稱及 Tab 內組件的名稱均不支援重名。Tab 標題內容支援重複。
注3：「標題內容」僅體現在畫布的 Tab 頁籤中，Tab 列表、組件圖層、畫布中頁籤選中、JS 呼叫、交互事件設定的呼叫物件等場景仍使用「名稱」。
在 Tab 列表中，也支援新增標籤頁，支援重新命名、刪除、隱藏、鎖定物件等操作。僅剩一個標籤頁時，刪除標籤頁即刪除 Tab 組件。
支援從下向上拖曳標籤頁，改變標籤頁順序。不支援從上向下拖曳標籤頁，可使用調整層級>下移一層。
選中 Tab 整體，在 Tab 列表下方「內容」配置面板中，可對標籤頁和切頁按鈕進行設定。
勾選「啟動調整鎖定」時，調整 Tab 大小，內部組件大小也會等比例變化。
當範本選擇「行動端」模式且開啟 重佈局 時，Tab 組件支援設標度籤頁內邊距及組件間隙。
勾選「顯示切頁按鈕」，可選擇使用「Tab欄按鈕」或「導航器按鈕」。
Tab欄按鈕設定如下圖所示：
各設定項的具體說明如下表所示：
固定顯示：預覽時，Tab欄按鈕預設顯示在組件上
懸浮顯示：預覽時，Tab欄按鈕預設不顯示，當滑鼠懸浮在輪播組件上時，Tab欄按鈕出現
支援三種樣式：科技樣式、聯排樣式或底線式，差別僅在於按鈕樣式的不同
自然佈局：根據 Tab頁組件/組合名稱的長度和按鈕字號，按照合適的長度自適應顯示 Tab欄，超出輪播器尺寸時，出現翻頁箭頭
等分佈局：根據輪播器組件的長度/高度，以及輪播列表中組件的個數，等分 Tab欄，每個 Tab按鈕的長度一致
樣式範本為「科技樣式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色
按鈕底圖：內建了五種底圖樣式可供選擇，可改變底圖色相
翻頁箭頭：僅當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，支援設定翻頁箭頭。內建了四種箭頭樣式可供選擇，可改變箭頭色相
樣式範本為「聯排樣式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色、按鈕背景的填充顏色以及按鈕的邊框線樣式
圓角：可對 Tab欄按鈕整體設定圓角效果
注：聯排樣式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
樣式範本為「底線式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色、按鈕底線樣式和顏色
注：底線式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
導航器按鈕設定如下圖所示：
設定
說明
顯示策略
支援兩種顯示策略：
固定顯示：當預覽該頁面時，導航器按鈕預設顯示在組件上。
懸浮顯示：當預覽該頁面時，導航器按鈕預設不顯示。當滑鼠懸浮在輪播組件上時，導航器按鈕出現。
大小
用於調整導航器按鈕的尺寸大小。
顔色
用於調整導航器按鈕的顔色。
不透明度
用於調整導航器按鈕的透明度。
導航點
控制底部導航點是否出現。
導航器和導航點的位置如下圖所示：
選中 Tab 整體，點選「交互」，支援設定「交互事件」和「輪播設定」。如下圖所示：
點選新增事件，支援新增「標籤切換事件」。
「標籤切換事件」支援的事件類型包括：組件聯動、三維模型動畫和 JavaScript 。更多內容請參見：FVS組件交互屬性 。
V2.9.1 之前版本，預設勾選「開啟自動輪播」，考慮對效能的影響，V2.9.1 及之後版本，預設不勾選「開啟自動輪播」。
可設定輪播間隔，預設為 6000 毫秒。Tab 組件按照 Tab 列表中的順序和輪播間隔時間，循環展示各標籤頁內容。
輪播時，滑鼠懸浮 Tab，輪播暫停，滑鼠移出 Tab，輪播繼續。
注：FVS V3.0.0 及以上版本，新增組件懸停的控制API，可控制懸停效果的開啟或關閉。詳情請參見：JS控制滑鼠懸停效果的開啟與關閉。
當範本選擇「行動端」模式時，「輪播設定」中支援「開啟切換動畫」；開啟切換動畫後，還支援「開啟滑動切頁」。
開啟切換動畫後，行動端預覽時，切換 Tab 頁有左右滑動的動畫效果。
開啟滑動切頁後，可實現手勢滑動切換 Tab 頁。
注：V2.6.1 之前的版本中，僅支援「開啟滑動切頁」，不支援配置切換動畫，左右滑動的切換動畫始終存在。
V3.1.0 及之後版本，當範本選擇「行動端」模式時，新增「預覽設定」Tab，支援「開啟導航」。預設不開啟。
當行動端頁面內容較長且包含多個組件時，組件導航可以快速定位頁面中的指定組件，幫助使用者在內容間高效切換。
升級 V2.3.1 版本後，舊範本中已有的輪播器組件，相容生成 Tab 組件標籤頁，原有功能均可正常使用。
需要注意的是，若原先輪播器組件未啟動 Tab 欄按鈕，啟動後 Tab 欄內容按照標籤頁實際名稱顯示。
若原先輪播器組件啟動了 Tab 欄按鈕，那麼標籤頁的實際名稱按照 Tab 組件規則生成，但 Tab 欄按鈕顯示的內容仍保持原來的內容。
學習輪播器基礎使用後，推薦您更多進階內容：
滑鼠選中內容，快速回饋問題
滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙