當前為5.1版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

Tab組件

1. 概述

1.1 版本

FineBI 版本JAR 包App 版本HTML5 行動端展現插件功能變動
5.1.82020-12-0410.4.97V10.4.97-
5.1.9
2021-01-06--
  • 支援複製 tab 標籤頁即標籤頁內組件

  • tab 標籤頁可設定相同名稱頁籤

--10.4.986V10.4.986
行動端中 Tab 組件展示標題
5.1.16-10.4.990V10.4.990一個 Tab 組件中支援拖入多個、多種組件
5.1.18-10.4.994V10.4.994

支援 Tab 組件內的組件調整大小位置

1.2 應用場景

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

1101-效果.GIF

1.3 功能簡介

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

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

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

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

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

2. 新增 Tab 組件

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

1101-01.png

3. 新增 tab 頁

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

1101-02.png

4. 新增 tab 頁組件

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

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

4.1 製作組件

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

1101-03.png

4.2 新增組件至 tab 頁中

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

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


1101-04.GIF

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

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

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

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

1101-05.png

5. 修改 tab 頁標題

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

6. 設定組件樣式

6.1 進入樣式設定頁面

1)點選 Tab 組件,選擇「1603442333(1).png>樣式設定」,則進入樣式設定介面。如下圖所示:

1101-08.png

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

1101-09.png

6.2 設定組件標題

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

6.3 設定組件背景

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

1101-12.png

6.4 設定 tab 頁標籤樣式

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

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

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

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

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

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

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

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

7. 調整 tab 頁順序

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

1101-17.png


8. 複製

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

8.1 複製 Tab 組件

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

8.2 複製 tab 頁

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

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

1101-18.png

8.3  複製 Tab 頁內組件

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

1101-19.png

9. 懸浮

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

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

10. 刪除

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

10.1 刪除 Tab 組件

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

10.2 刪除 tab 頁

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

1101-22.png

10.3 移除 Tab 頁組件

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

1101-23.GIF

11. 組件匯出

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

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

1101-23.png

12. 行動端效果預覽

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

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

1101-24.PNG

附件列表


主題: 构建图表和分析数据
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 评价文档,奖励 1 ~ 100 随机 F 豆!