1. 概述
1.1 版本
報表伺服器版本 |
---|
11.0 |
1.2 應用場景
範本維度、資料較多,又不希望範本頁面過長時,可使用 Tab 塊,手動切換維度,且可以展示每個維度的標題。
同一個頁面有多個明細資料表,不希望每一個都平鋪展示出來,可使用 Tab 塊,根據實際需要展示資料。
1.3 功能簡介
針對您想要分析的某組資料,可以從使用 Tab 設定多個 Tab,分別從多個維度來分析這組資料,查看時切換 Tab 即可,非常方便。
例如:想要分析某工廠的生產情況,可以從產品產量維度、生產線產量維度、庫存維度來分析,如下圖所示:
2. 操作說明
首先我們點選設計器左上角「建立決策報表」,建立一個空白範本。將 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. Tab 屬性
3.1 Tab 塊整體屬性
選中 tablayout 即 Tab 塊整體,可在下方屬性面板設定其屬性。如下圖所示:
具體屬性介紹如下表所示:
屬性 | 屬性介紹 |
---|---|
組件名稱 | Tab 塊名稱預設為 tablayout+數字後綴,從 0 依次累加,支援修改,但不支援為空或重複 |
座標·尺寸 |
|
主體填充 | 可設定 Tab 頁背景填充為沒有背景、顔色、圖片或漸變色,如下圖所示: |
外沿樣式 | 可設定 Tab 塊整體的外沿樣式:
|
Tab 輪播 | 勾選開啟輪播後,Tab 頁會開啟輪播,可以設定輪播間隔,預設為 1.8 s |
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 個設定項,如下圖所示:
各設定項及說明如下表所示:
設定項 | 說明 |
---|---|
顯示方式 | 佔位顯示:圓點指標則顯示在 Tab 塊內容外面 懸浮顯示:圓點指標則懸浮在 Tab 塊內容上方 |
初始填充 | Tab 塊對應圓點的初始填充色 |
選中填充 | Tab 塊對應圓點的選中填充色,即高亮色 |
注1:行動端樣式範本選擇「滑動式」時,圓點的初始填充色和選中填充色按照「滑動式>tab樣式」的設定生效,此處的「初始填充」和「選中填充」設定不生效。
注2:不能使用圓點指標來滑動切換 Tab 塊,它只是作提示用。
不同樣式範本下圓點指標的顯示位置如下表所示:
樣式範本 | 圓點指標位置 |
---|---|
預設 | 置中顯示在下方 |
上選單式 | 置中顯示在下方 |
下選單式 | 置中顯示在上方 |
滑動式 | 顯示在左上角 |
聯排式 | 置中顯示在下方 |
3.3 Tab 頁
處於編輯狀態下的 Tab 頁,標題預設灰色,如下圖「標題0」,Tab 屬性介面如下圖所示:
具體設定如下表所示:
屬性 | 簡介 |
---|---|
組件名稱 | 組件名稱預設為 Tab + XY。 X 是第幾個 Tab 頁,從 0 依次累加 Y 是第幾個 Tab 塊,跟隨 tablayout 的數字後綴 支援修改,但不支援為空或重複 |
可見 | 「可見」按鈕預設勾選,取消勾選後,設計器介面按鈕灰化,預覽範本時該 Tab 及其內容不可見 注:範本匯出時,被隱藏的 Tab 不會被匯出 |
樣式 | 可以自訂當前 Tab 頁標題的初始、滑鼠懸浮、選中的背景,均支援設定為顔色、圖片或漸變色 注:行動端只支援設定「初始背景」和「滑鼠點選背景」,且只支援顯示顔色,若設定為圖片,則顯示為預設顔色 |
內邊距 | Tab 設計區域部分,為自適應佈局模式,組件新增時自動充滿 Tab 頁,可以設定內邊距
|
組件間隔 | 和內邊距一樣,每個 Tab 頁可以設定各自的內部組件間隔 |
標題 | 當前編輯的 Tab 的標題,可以修改當前編輯 Tab 的標題名,修改後設計區域會即時體現 |