反饋已提交

網絡繁忙

Tab塊

1. 概述

1.1 版本

報表伺服器版本
11.0

1.2 應用場景

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

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

1.3 功能簡介

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

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

1.gif

2. 操作說明

首先我們點擊設計器左上角「新建決策報表」,新建一個空白模板。将 body 的布局方式改爲「絕對布局」,将 Tab 塊拖入 body 中。

注:11.0.3 版本及之後的設計器中,body 布局 中自适應相關設置由右側屬性面板移至菜單欄「模板>PC端自适應屬性」中。

添加 Tab 塊後,在組件設置列表可以看到一個 Tab 塊包含 3 個層級:

  • tablayout : Tab 塊的整體

  • tabpane :容納所有 Tab 頁标題的面板

  • Tab :一個 Tab 頁的設計區域,支持添加組件

選中 Tab 塊後,點擊組件右上角的編輯按鈕,進入編輯狀态,可進行添加、删除、移動 Tab 頁等操作。

拖拽Tab塊的組件至報表主體,編輯後點選【 】號新增tab,點選tab標籤的【x】即可刪除。

2.gif

還可以透過右上角的組件層級展示面板來刪除Tab塊。

3.png

3. Tab 屬性

3.1 Tab 塊整體屬性

選中 tablayout 即 Tab 塊整體,可在下方屬性面板設置其屬性。如下圖所示:

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

屬性
屬性介紹
組件名稱

Tab 塊名稱默認爲 tablayout+數字後綴,從 0 依次累加,支持修改,但不支持爲空或重複

坐标·尺寸
  • 絕對布局時,組件大小初始爲 500*300,位置可随意放置,支持拖拽和輸入數字修改坐标和尺寸

  • 自适應布局下不支持修改坐标

主體填充

可設置 Tab 頁背景填充爲沒有背景、顔色、圖片或漸變色,如下圖所示:

外沿樣式

可設置 Tab 塊整體的外沿樣式:

  • 渲染風格:可設置爲普通或陰影

  • 邊框:可選擇爲無或不同線型

  • 邊框顔色:設置邊框顔色

Tab 輪播勾選開啓輪播後,Tab 頁會開啓輪播,可以設置輪播間隔,默認爲 1.8 s

注:移動端不支持 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 組件多樣化

3.3 Tab 頁

處於編輯狀态下的 Tab 頁,标題默認灰色,如下圖「标題0」,Tab 屬性界面如下圖所示:

具體設置如下表所示:

屬性
簡介
組件名稱組件名稱默認爲 Tab+數字後綴,支持修改,但不支持爲空或重複
可見

「可見」按鈕默認勾選,取消勾選後,設計器界面按鈕灰化,預覽模板時該 Tab 及其内容不可見

注:模板導出時,被隐藏的 Tab 不會被導出

樣式

可以自定義當前 Tab 頁标題的初始、鼠标懸浮、選中的背景,均支持設置爲顔色、圖片或漸變色

注:移動端只支持設置「初始背景」和「鼠标點擊背景」,且只支持顯示顔色,若設置爲圖片,則顯示爲默認顔色

内邊距

Tab 設計區域部分,爲自适應布局模式,組件添加時自動充滿 Tab 頁,可以設置内邊距

  • 默認 Tab 頁的上下左右内邊距都爲 0

  • 每個 Tab 頁可以設置不同的内邊距

組件間隔和内邊距一樣,每個 Tab 頁可以設置各自的内部組件間隔
标題當前編輯的 Tab 的标題,可以修改當前編輯 Tab 的标題名,修改後設計區域會及時體現


附件列表


主題: 決策報表應用
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉