1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.22 | V2.3.1 | 輪播器改造升級為 Tab 組件。歷史輪播器組件請參考 FVS輪播器組件 |
| V2.6.1 | Tab 組件支援關閉行動端切換動畫。詳情請參見 6.3 節 | |
| V2.9.1 | Tab 組件自動輪播修改為預設不開啟。詳情請參見 6.1 節 | |
| V2.10.0 | Tab 組件標籤頁新增「標題內容」，支援重複、為空。詳情請參見第 4 節 | |
| V3.0.0 | Tab 組件自動輪播，滑鼠懸停效果支援開啟和關閉。詳情參見 6.1 節 |
1.2 功能簡介
功能簡介：【輪播器組件】是一種容器，可以將其他各類型組件（不包含輪播器組件本身，不支援組合）拖入【輪播器組件】，並按照一定規則輪播。
注：Tab 頁載入邏輯為懶載入，切換標籤頁時才載入新標籤頁的內容。
注：本文僅為大家介紹「Tab 組件」特有功能，其他屬性不贅述。
組件交互請參見：FVS組件交互屬性 。
組件動畫請參見：FVS分頁間組件動畫 。
組件屬性請參見：FVS組件樣式屬性 。
2. 新增Tab組件
建立一張「企業戰情室範本」：
在組件區「容器」中點選或拖曳「Tab」組件到畫布，預設顯示「請將組件/組合拖入Tab內，新增的組件/組合可以在Tab標籤頁內自由佈局」。
如下圖所示：
3. 組件移入移出
直接拖曳組件區或本頁面中其他組件/組合到 Tab 標籤頁上方，出現提示「釋放進入Tab當前標籤頁」，鬆開滑鼠，即可將其拖入 Tab 標籤頁。
Tab 標籤頁內佈局規則和 絕對畫布 一致：
拖入組件時，組件大小不變。
組件位置若超出標籤頁左/上邊框，則組件拖入後自動對齊左/上邊框；其餘位置則以組件釋放位置為準，支援超出標籤頁右/下邊框。
若組件超出標籤頁右/下邊框，選中標籤頁或標籤頁內的組件，出現橫向/縱向捲軸（預覽時懸浮出現），可捲動查看。
注：標籤頁中支援再次拖入 Tab 組件，但最多支援 3 層 Tab 巢狀。
如下圖所示：
也支援在組件圖層列表中，拖曳組件圖層順序移入標籤頁，拖入位置預設在標籤頁中心位置。如下圖所示：
組件移出包括以下三種方式：
直接拖曳組件到 Tab 外，出現提示「釋放移出標籤頁」，鬆開滑鼠，即可將其移出 Tab 標籤頁。此時移出的組件位置以釋放位置為準。
在組件圖層列表或 Tab 列表中，直接拖曳組件圖層順序移出 Tab 層級。此時移出的組件位置保持不變。
在 Tab 列表，懸浮組件，點選「更多>移出」即可將組件移出 Tab 。此時移出的組件預設顯示在 Tab 組件右側。
如下圖所示：
4. Tab 列表及標籤頁
新增 Tab 組件時，自帶一個標籤頁，支援新增多個標籤頁。
右側 Tab 列表中展示所有 Tab 標籤頁和標籤頁內的組件，和左側組件圖層中展示內容一致。
標籤頁支援單獨設定「名稱」、「標題內容」、「邊框背景」、「邊框線」及「圓角半徑」。
「名稱」為實際名，預設值為「標籤頁X_TabX_頁面X」。
「標題內容」為顯示名，預設值為「標籤頁X」。
注1：「標題內容」為 V2.10.0 版本新增。歷史範本的「標題內容」取原「名稱」的值。
注2：Tab 組件名稱、Tab 標籤頁名稱及 Tab 內組件的名稱均不支援重名。Tab 標題內容支援重複。
注3：「標題內容」僅體現在畫布的 Tab 頁籤中，Tab 列表、組件圖層、畫布中頁籤選中、JS 呼叫、交互事件設定的呼叫物件等場景仍使用「名稱」。
在 Tab 列表中，也支援新增標籤頁，支援重新命名、刪除、隱藏、鎖定物件等操作。僅剩一個標籤頁時，刪除標籤頁即刪除 Tab 組件。
支援從下向上拖曳標籤頁，改變標籤頁順序。不支援從上向下拖曳標籤頁，可使用調整層級>下移一層。
5. Tab內容設定
選中 Tab 整體，在 Tab 列表下方「內容」配置面板中，可對標籤頁和切頁按鈕進行設定。
5.1 標籤頁
5.1.1 調整鎖定
勾選「啟動調整鎖定」時，調整 Tab 大小，內部組件大小也會等比例變化。
5.1.2 內邊距
當範本選擇「行動端」模式且開啟 重佈局 時，Tab 組件支援設標度籤頁內邊距及組件間隙。
5.2 切頁按鈕
勾选「显示切页按钮」，可选择使用「Tab栏按钮」或「导航器按钮」。
5.2.1 Tab欄按鈕
Tab欄按鈕設定如下圖所示：
各設定項的具體說明如下表所示：
| 設定 | 說明 |
|---|---|
| 顯示策略 |
|
| 樣式範本 | 支援三種樣式：科技樣式、聯排樣式或底線式，差別僅在於按鈕樣式的不同 |
| 佈局方式 |
|
| 按鈕位置 | 可調整 Tab欄按鈕的位置，支援上、下、左、右四種 |
| 字元樣式 | 可調整 Tab欄按鈕中的文字字體、大小等，Tab欄的大小隨文字大小自適應調整 |
| 文字位置 | 僅當佈局方式選擇「等分佈局」時，可設定 Tab欄按鈕中的文字位置，支援靠左、置中、靠右 |
| 按鈕樣式 | 樣式範本為「科技樣式」時，可設定項如下：
|
樣式範本為「聯排樣式」時，可設定項如下：
注：聯排樣式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
| |
樣式範本為「底線式」時，可設定項如下：
注：底線式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
|
5.2.2 導航器按鈕
導航器按鈕設定如下圖所示：
各設定項的具體說明如下表所示：
設定 | 說明 |
顯示策略 | 支援兩種顯示策略： 固定顯示：當預覽該頁面時，導航器按鈕預設顯示在組件上。 懸浮顯示：當預覽該頁面時，導航器按鈕預設不顯示。當滑鼠懸浮在輪播組件上時，導航器按鈕出現。 |
大小 | 用於調整導航器按鈕的尺寸大小。 |
顔色 | 用於調整導航器按鈕的顔色。 |
不透明度 | 用於調整導航器按鈕的透明度。 |
導航點 | 控制底部導航點是否出現。 |
導航器和導航點的位置如下圖所示：
6. Tab交互屬性
選中「Tab組件」，點選「交互」，支援設定「自動輪播」和「標籤切換事件」。如下圖所示：
6.1 自動輪播
V2.9.1 之前版本，預設勾選「開啟自動輪播」，考慮對效能的影響，V2.9.1 及之後版本，預設不勾選「開啟自動輪播」。
| 效果 | |
|---|---|
| 不開啟自動輪播 | Tab 組件預設顯示 Tab 列表中的第一個標籤頁內容。使用者需要透過切頁按鈕查看其他標籤頁內容 |
| 開啟自動輪播 | 可設定輪播間隔，預設為 6000 毫秒。Tab 組件按照 Tab 列表中的順序和輪播間隔時間，循環展示各標籤頁內容。 輪播時，滑鼠懸浮 Tab，輪播暫停，滑鼠移出 Tab，輪播繼續。 注：FVS V3.0.0 及以上版本，新增組件懸停的控制API，可控制懸停效果的開啟或關閉。詳情請參見：JS控制滑鼠懸停效果的開啟與關閉。 |
6.2 標簽切換事件
「標簽切換事件」支援的事件類型包括：組件聯動、三維模型動畫和 JavaScript 。更多內容請參見：FVS組件交互屬性 。
6.3 行動端滑動切頁
當範本選擇「行動端」模式時，預設勾選「開啟滑動切頁」。則行動端預覽時，切換 Tab 有左右滑動效果。
開啟切換動畫後，行動端預覽時，切換 Tab 頁有左右滑動的動畫效果。
開啟滑動切頁後，可實現手勢滑動切換 Tab 頁。
注：V2.6.1 之前的版本中，僅支援「開啟滑動切頁」，不支援配置切換動畫，左右滑動的切換動畫始終存在。
7. 相容說明
升級 V2.3.1 版本後，舊範本中已有的輪播器組件，相容生成 Tab 組件標籤頁，原有功能均可正常使用。
需要注意的是，若原先輪播器組件未啟動 Tab 欄按鈕，啟動後 Tab 欄內容按照標籤頁實際名稱顯示。
若原先輪播器組件啟動了 Tab 欄按鈕，那麼標籤頁的實際名稱按照 Tab 組件規則生成，但 Tab 欄按鈕顯示的內容仍保持原來的內容。
如下圖所示：
