Tab塊

1.1 版本

1.2 應用場景

• 範本維度、資料較多，又不希望範本頁面過長時，可使用 Tab 塊，手動切換維度，且可以展示每個維度的標題。

• 同一個頁面有多個明細資料表，不希望每一個都平鋪展示出來，可使用 Tab 塊，根據實際需要展示資料。
  

1.3 功能簡介

針對您想要分析的某組資料，可以從使用 Tab 設定多個 Tab，分別從多個維度來分析這組資料，查看時切換 Tab 即可，非常方便。

例如：想要分析某工廠的生產情況，可以從產品產量維度、生產線產量維度、庫存維度來分析，如下圖所示：

首先我們點選設計器左上角「建立決策報表」，建立一個空白範本。將 body 的佈局方式改為「絕對佈局」，將 Tab 塊拖入 body 中。

注：11.0.3 版本及之後的設計器中，body 佈局 中自適應相關設定由右側屬性面板移至菜單欄「範本>PC端自適應屬性」中。

如下圖所示：

新增 Tab 塊後，在組件設定列表可以看到一個 Tab 塊包含 3 個層級：

• tablayout ： Tab 塊的整體

• tabpane ：容納所有 Tab 頁標題的面板

• Tab ：一個 Tab 頁的設計區域，支援新增組件

選中 Tab 塊後，點選組件右上角的編輯按鈕，進入編輯狀態，可進行新增、刪除、行動 Tab 頁等操作。

1）新增：點選 Tab 頁標題面板右側的  按鈕可以新增 Tab 頁，預設自動新增在最後面。

2）行動：使用滑鼠右鍵按需要行動的 Tab 頁，彈出四個選項：行動到首位，往前行動，往後行動和行動到末尾。

3）刪除：點選 Tab 標題右上角的 × 按鈕，可刪除 Tab 頁，也可在組件設定列表中選中後直接刪除。

3.1 Tab 塊整體屬性

選中 tablayout 即 Tab 塊整體，可在下方屬性面板設定其屬性。如下圖所示：

具體屬性介紹如下表所示：

3.2 Tab 頁標題面板

選中 tabpane 即 Tab 頁標題面板。如下圖所示：

3.2.1 PC 端

tabpane PC 端屬性如下表所示：

屬性		簡介
組件名稱		組件名稱預設為 tabpane+數字後綴，從 0 依次累加，支援修改，但不支援為空或重複
座標·尺寸		可透過修改數值或拖曳標題面板，調整 Tab 標題面板的高度，如下圖所示： 注1：組件大小不可以超出 tablayout 的高度範圍 注2：組件大小為 0 ，或拖動標題組件到上下線重合時，即可隱藏 Tab 標題
樣式範本	預設
	卡片式
	錦旗
	書簽式
	選單式
	五邊形
	梯形
顯示位置		Tab 頁標題面板的位置可選擇：上、下、左、右
背景/字體		自訂 Tab 標題背景、Tab 標題字號、字體等
正文方向	橫排
	縱排

3.2.2 行動端

tabpane 行動端屬性如下圖所示：

樣式範本詳情參見：[通用]決策報表TAB標籤面板樣式

內邊距詳情參見：[通用]決策報錶行動端設定內邊距及組件間隔

顯示該在組件下的層級導航詳情參見：［通用］組件導航快速定位

組件間隔詳情參見：[通用]決策報錶行動端設定內邊距及組件間隔

1）顯示標題

• 「顯示標題」控制是否顯示 Tab 標題欄。

• 預設勾選，即預設顯示標題；取消勾選則不顯示 Tab 標題欄，也就無法透過點選 Tab 標題來切換 Tab 塊，效果如下圖所示：

2）支援滑動切換

• 「支援滑動切換」控制預覽時是否可以左右滑動 Tab 內容來切換 Tab 塊。

• 預設不勾選，即不可透過滑動 Tab 內容切換Tab 標籤頁；勾選後，可透過滑動Tab 內容切換Tab 標籤頁，效果如下圖所示：

3）顯示圓點指標

「圓點指標」即提示有幾個 Tab 塊，切換到哪個 Tab 塊，對應的圓點會高亮。

預設不勾選，即預設不顯示圓點指標；勾選後會出現 3 個設定項，如下圖所示：

各設定項及說明如下表所示：

注1：行動端樣式範本選擇「滑動式」時，圓點的初始填充色和選中填充色按照「滑動式>tab樣式」的設定生效，此處的「初始填充」和「選中填充」設定不生效。

注2：不能使用圓點指標來滑動切換 Tab 塊，它只是作提示用。

• 不同樣式範本下圓點指標的顯示位置如下表所示：

3.3 Tab 頁

處於編輯狀態下的 Tab 頁，標題預設灰色，如下圖「標題0」，Tab 屬性介面如下圖所示：

具體設定如下表所示：