決策報表TAB標籤面板樣式

1.1 版本

1.2 應用場景

實現不同 Tab 系列下不同維度的資料分析時，使用者可選擇並設定多樣化的 Tab 標籤面板樣式，使多維度範本更加清晰和簡潔。

1.3 功能簡介

行動端提供更為豐富的 Tab 效果，共有 5 類行動端樣式範本：「預設」、「上選單式」、「下選單式」、「滑動式」、「聯排式」，如下圖所示：
注：5 類行動端樣式範本下， Tab 內圖表塊、報表塊組件內部不支援上下左右滑動，不支援放大。

1）點選下載範本：Tab組件行動端樣式範本.frm ，在 FineReport 設計器中開啟該範本。

2）選中右側屬性面板中的「組件設定>tabpane0」。

3）點選「行動端」，點選「樣式範本」旁的「...」按鈕，可以看到 樣式範本 有 5 種樣式：「預設」、「上選單式」、「下選單式」、「滑動式」、「聯排式」，如下圖所示：

「預設」樣式不可設定。

1）樣式範本 選擇「預設」，點選「確定」，如下圖所示：

2）App 及 HTML5 端效果預覽如下圖所示：

注：樣式範本 為「預設」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。

4.1 設定

tab樣式 分為「標準」和「自訂」。

1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。

2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。

具體設定項說明如下表所示：

4.2 範例

1）樣式範本 選擇「上選單式」，tab樣式 選擇「自訂」。

2）配置具體設定項，點選「確定」，如下圖所示：

3）App 及 HTML5 端效果預覽如下圖所示：

注：樣式範本 為「上選單式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。

5.1 設定

tab樣式 分為「標準」和「自訂」。

1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。

2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。

具體設定項說明如下表所示：

5.2 範例

1）樣式範本 選擇「下選單式」，tab樣式 選擇「自訂」。

2）配置具體設定項，點選「確定」，如下圖所示：

3）App 及 HTML5 端效果預覽如下圖所示：

注：樣式範本 為「下選單式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。

6.1 設定

tab樣式 分為「標準」和「自訂」。

1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。

2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。

具體設定項說明如下表所示：

6.2 範例

1）樣式範本 選擇「滑動式」，tab樣式 選擇「自訂」。

2）配置具體設定項，點選「確定」，如下圖所示：

3）App 及 HTML5 端效果預覽如下圖所示：

注：樣式範本 為「滑動式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。

7.1 設定

tab樣式 分為「標準」和「自訂」。

1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。

2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。

具體設定項說明如下表所示：

7.2 範例

1）樣式範本 選擇「聯排式」，tab樣式 選擇「自訂」。

2）配置具體設定項，點選「確定」，如下圖所示：

3）App 及 HTML5 端效果預覽如下圖所示：

注：樣式範本 為「聯排式」時，若 Tab 塊標題較長，多餘的部分不顯示。

 Tab 內容過多超過手機螢幕一屏，下拉後無法快速切換 Tab 標籤頁。為了方便使用者切換 Tab 標籤頁，行動端 Tab 標籤面板支援凍結。

選中 body ，行動端屬性選擇「手機重佈局」，「豎屏」顯示範本時，支援上下滑動 Tab 頁：

Tab 樣式為「預設樣式」、「上選單式」、「聯排式」時，Tab 標籤面板始終固定在「頁面頂端」。

Tab 樣式為「下選單式」、「滑動式」時，Tab 標籤面板不會凍結。

注：當 Tab 在絕對畫布中時，行動端 Tab 標籤面板不支援凍結 。