Tab組件

1.1 版本

1.2 應用場景

使用者在製作儀表板時，需要將一個儀表板中的內容分多個主題去展示，並且可以同時查看，如下圖所示：

1.3 功能簡介

• 5.1.8 及之後的版本 Tab 組件支援使用者在一個 Tab 組件內下的不同 tab 頁新增組件，並點選 tab 頁標題切換不同 tab 頁。

• 5.1.16 以及之後的版本支援使用者在一個 Tab 組件中新增多個、多種組件（圖表組件、過濾組件、文字組件、圖片組件、Web組件）。
  

• Tab 組件支援懸浮、複製、刪除、自身樣式設定等。

注：Tab 組件中的 tab 頁是非同步載入。

以 1.2 節作為範例進行說明。

在儀表板編輯介面點選「其他>Tab 組件」，則成功新增 Tab 組件。如下圖所示：

點選組件 tab 頁標題旁邊的「+」則新增 Tab 頁，新增的 tab 標籤頁都叫 tab ，且點選 tab 頁標題即可切換 tab 頁，如下圖所示：

• 支援新增的組件範圍：圖表/表格組件、過濾組件、文字組件、圖片組件、Web組件。注：不包括 Tab 組件。

• 新增的組件作用生效範圍： Tab 組件並不改變原有組件的設定及生效作用範圍。（包括聯動、鑽取等效果）

4.1 製作組件

使用內建資料集「地區數據分析」製作「合同金額」和「付款金額」組件，並新增「日期區間」時間過濾組件、「省份」文字過濾組件，如下圖所示：

4.2 新增組件至 tab 頁中

點選第一個 tab 頁標籤，切換到需要新增組件的 tab 頁，再將組件拖入其中，則成功新增組件，如下圖所示：

注：tab 組件透過拖拽可按比例調整大小。

注1：在 tab 標籤未重命名時，僅按照第一個拖入組件的名稱進行變化，例如上圖中當將過濾組件首先拖入 tab 頁後，tab 頁名稱自動修改為過濾組件名稱「日期區間」。若此時再拖入第二個組件則不影響當前 tab 頁標籤名稱，此後 tab 頁標籤的名稱將固定為第一個拖入組件時的名稱不變。

注2：tab 頁標籤內組件在拖入第二個及以後的組件時，組件標題不隱藏，並且恢復第一個組件標題狀態由隱藏到顯示。

注3：tab 頁標籤及 Tab 組件標題不支援新增欄位。

同理，將第二個 tab 頁中也拖入需要的組件，如下圖所示：

 tab 頁支援設定標題。將滑鼠懸停在需要重命名的 tab 頁標題上，則出現下拉框，點選「編輯標題」，即可重命名 tab 頁標題。如下圖所示：

6.1 進入樣式設定頁面

1）點選 Tab 組件，選擇「>樣式設定」，則進入樣式設定介面。如下圖所示：

樣式設定介面可以設定 Tab 組件標題、背景和 Tab 頁樣式。

6.2 設定組件標題

對 Tab 組件標題字體格式進行設定，如下圖所示：

6.3 設定組件背景

設定「標題背景」和「組件背景」，詳情參見：組件背景樣式設定，如下圖所示：

6.4 設定 tab 頁標籤樣式

支援對切換的 Tab 樣式進行調整，包括「風格」、「位置」、「字體」、「選中狀態」和「預設狀態」。

範例設定第二種 Tab 樣式風格，設定完點選「確定」，效果如下圖所示：

Tab 頁標題的「風格」有三種樣式：

• 風格1：標籤背景色為下方線條，行動端與 PC 端效果一致。

• 風格2：選中標籤背景色為色塊，未選中為線條，行動端與 PC 端效果一致。

• 風格3：所有標籤的背景色都為色塊， PC 端與行動端展示效果不一致，行動端展示效果類似風格 1。

「預設態」即未選中的狀態，支援設定未選中的狀態下的 tab 頁字體和背景顏色。

「選中態」即選中的狀態，支援設定選中的狀態下的 tab 頁字體和背景顏色。Tab 組件設定結束後點選「確定」儲存樣式。如下圖所示：

每個 tab 頁支援左右拖拽調整先後順序，如下圖所示：

注：複製的大小與原組件大小一致，設定內容一致，懸浮狀態一致。

8.1 複製 Tab 組件

Tab 組件複製請參考文檔：複製組件

8.2 複製 tab 頁

點選標籤頁，下拉選擇「複製」，即可複製當前標籤頁，如下圖所示：

注：如果設定了 tab 標籤頁標題，則複製的 tab 標籤頁名稱與被複制的頁籤相同。

8.3  複製 Tab 頁內組件

Tab 組件內的 tab 頁下拖入的組件也支援複製。例如，點選「產品購買情況」圖表組件，下拉選擇「複製」，成功複製圖表組件，複製後仍保留在當前 tab 頁中，自動排在 tab 頁內最下方。如下圖所示：

Tab 組件、Tab 頁標籤內的組件支援設定懸浮，設定方式請參考文檔：組件懸浮

注：Tab 組件內外設定懸浮的組件不支援拖入拖出 Tab 組件。

 tab 頁和 Tab 組件刪除則對應內的組件也將被刪除，刪除時會進行提示。刪除組件詳情可參見：刪除組件

10.1 刪除 Tab 組件

刪除 Tab 組件，組件內的對應組件也一同刪除，操作如下圖所示：

10.2 刪除 tab 頁

點選 Tab 頁標題，選擇「刪除」，點選「確定」後成功刪除 Tab 頁，Tab 頁內組件也一同刪除，如下圖所示：

10.3 移除 Tab 頁組件

新增進 Tab 頁的組件可以從 Tab 組件中移除，傳回儀表板介面中，操作如下圖所示：

Tab 組件每個頁標籤支援單獨匯出到 Excel，匯出順序按照當前 Tab 頁標籤內的位置從左至右、從上到下的順序匯出。

例如本文範例匯出後如下圖所示：

行動端展現 Tab 組件效果如下圖所示：

注 ：行動端佈局內，可以調整 Tab 組件高度。