Tab組件

1. 概述

1.1 版本

FineBI 版本功能變動
6.0-

1.2 應用場景

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

11.gif

1.3 功能簡介

  • 使用者可以在一個 Tab 組件內下的不同 tab 頁新增組件,並點選 tab 頁標題切換不同 tab 頁。

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

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

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

2. 新增 Tab 組件

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

1.png

3. 新增 tab 頁

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

2.png

4. 新增 tab 頁組件

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

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

4.1 製作組件

使用內建資料集「地區資料分析」製作「合同金額」和「回款金額」組件,並新增「日期區間」時間過濾組件、「省份」文字過濾組件。也可直接下載資料:地區資料分析.xlsx

4.2 新增組件至 tab 頁中

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

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

2.gif

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

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

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

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

3.png

5. 修改 tab 頁標題

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

4.png

6. 設定組件樣式

6.1 進入樣式設定頁面

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

5.png

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

6.png

6.2 設定組件標題

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

7.png

8.png

6.3 設定組件背景

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

9.png

6.4 設定 tab 頁標籤樣式

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

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

10.png

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

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

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

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

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

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

 11.png

7. 調整 tab 頁順序

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

12.gif

8. 複製

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

8.1 複製 Tab 組件

Tab 組件複製請參考文檔:管理視覺化組件

8.2  複製 Tab 頁內組件

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

13.png

9. 懸浮

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

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

10. 刪除

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

10.1 刪除 Tab 組件

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

14.png

10.2 刪除 tab 頁

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

15.png

10.3 移除 Tab 頁組件

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

19.gif

11. 組件匯出

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

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

21.png

12. 行動端效果預覽

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

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

23.gif

附件列表


主题: 管理系統
已经是第一篇
已经是最后一篇
  • 有帮助
  • 没帮助
  • 只是浏览
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

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

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

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙