1. 概述
1.1 版本
| 報表伺服器版本 | App 版本 | HTML5 行動端展現插件版本 |
|---|---|---|
| 11.0 | V11.0 | V11.0 |
1.2 應用場景
實現不同 Tab 系列下不同維度的資料分析時，使用者可選擇並設定多樣化的 Tab 標籤面板樣式，使多維度範本更加清晰和簡潔。
1.3 功能簡介
行動端提供更為豐富的 Tab 效果，共有 5 類行動端樣式範本：「預設」、「上選單式」、「下選單式」、「滑動式」、「聯排式」，如下圖所示：
注：5 類行動端樣式範本下， Tab 內圖表塊、報表塊組件內部不支援上下左右滑動，不支援放大。
2. 功能入口
1）點選下載範本：Tab組件行動端樣式範本.frm ，在 FineReport 設計器中開啟該範本。
2）選中右側屬性面板中的「組件設定>tabpane0」。
3）點選「行動端」，點選「樣式範本」旁的「...」按鈕，可以看到 樣式範本 有 5 種樣式：「預設」、「上選單式」、「下選單式」、「滑動式」、「聯排式」，如下圖所示：
3. 預設
「預設」樣式不可設定。
1）樣式範本 選擇「預設」，點選「確定」，如下圖所示：
2）App 及 HTML5 端效果預覽如下圖所示：
注：樣式範本 為「預設」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。
4. 上選單式
4.1 設定
tab樣式 分為「標準」和「自訂」。
1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。
2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 顯示間隔 |
| |
| 背景 | 初始填充 | 支援設定 Tab 塊初始填充背景顏色 |
| 選中填充 | 支援設定 Tab 塊選中填充背景顏色 | |
| 字元 | 初始字元 | 支援設定 Tab 塊初始字元的字體、字號（預設為15，設定範圍為1-99之間的整數）、字體顏色、粗體、斜體 |
| 選中字元 | 支援設定 Tab 塊選中字元字體顏色 | |
| 下邊框 | 線型 | 支援設定 Tab 塊下邊框線型 |
| 顏色 | 支援設定 Tab 塊下邊框顏色 | |
| 底線 | 線型 | 支援設定 Tab 塊底線線型 |
| 顏色 | 支援設定 Tab 塊底線顏色 | |
4.2 範例
1）樣式範本 選擇「上選單式」，tab樣式 選擇「自訂」。
2）配置具體設定項，點選「確定」，如下圖所示：
3）App 及 HTML5 端效果預覽如下圖所示：
注：樣式範本 為「上選單式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。
5. 下選單式
5.1 設定
tab樣式 分為「標準」和「自訂」。
1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。
2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 背景 | 初始填充 | 支援設定 Tab 塊初始填充背景顏色 |
| 選中填充 | 支援設定 Tab 塊選中填充背景顏色 | |
| 字元 | 初始字元 | 支援設定 Tab 塊初始字元的字體、字號（預設為15，設定範圍為1-99之間的整數）、字體顏色、粗體、斜體 |
| 選中字元 | 支援設定 Tab 塊選中字元字體顏色 | |
| 圖示 | 初始圖示 | 支援設定 Tab 塊初始圖標 注：建議使用48*48規格的 PNG 圖片 |
| 選中圖示 | 支援設定 Tab 塊選中圖標 注：建議使用48*48規格的 PNG 圖片 | |
| 分割線 | 線型 | 支援設定 Tab 塊分割線線 注：行動端不支援 App 顯示分割線型 |
| 顏色 | 支援設定 Tab 塊分割線顏色 | |
5.2 範例
1）樣式範本 選擇「下選單式」，tab樣式 選擇「自訂」。
2）配置具體設定項，點選「確定」，如下圖所示：
3）App 及 HTML5 端效果預覽如下圖所示：
注：樣式範本 為「下選單式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。
6. 滑動式
6.1 設定
tab樣式 分為「標準」和「自訂」。
1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。
2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 背景 | 填充 | 支援設定 Tab 塊填充背景色 |
| 字元 | 初始字元 | 支援設定 Tab 塊初始字元的字體、字號（預設為15，設定範圍為1-99之間的整數）、字體顏色、粗體、斜體 |
圓點指標 | 初始填充 | 支援設定圓點顯示裝置初始填充顏色 |
| 選中填充 | 支援設定圓點顯示裝置初始填充顏色 | |
6.2 範例
1）樣式範本 選擇「滑動式」，tab樣式 選擇「自訂」。
2）配置具體設定項，點選「確定」，如下圖所示：
3）App 及 HTML5 端效果預覽如下圖所示：
注：樣式範本 為「滑動式」時，若 Tab 塊標題較長，顯示不全的部分用省略號代替。
7. 聯排式
7.1 設定
tab樣式 分為「標準」和「自訂」。
1）tab樣式 為「標準」時，不可自訂設定 tab樣式 。
2）tab樣式 為「自訂」時，可自訂設定 tab樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 元件邊距 |
| |
| 元件背景 | 初始填充 | 支援設定按鈕初始填充背景色 |
| 選中填充 | 支援設定按鈕選中填充背景色 | |
| 邊框 | 線型 | 支援設定按鈕邊框線型 |
| 顏色 | 支援設定按鈕邊框顏色 | |
| 圓角 | 支援設定按鈕邊框圓角，預設為2 | |
| 字元 | 初始字元 | 支援設定按鈕初始字元的字體、字號（範圍為1-99之間的整數，預設為15）、字體顏色、粗體、斜體 |
| 選中字元 | 支援設定選中字元的字體顏色 | |
7.2 範例
1）樣式範本 選擇「聯排式」，tab樣式 選擇「自訂」。
2）配置具體設定項，點選「確定」，如下圖所示：
3）App 及 HTML5 端效果預覽如下圖所示：
注：樣式範本 為「聯排式」時，若 Tab 塊標題較長，多餘的部分不顯示。
8. Tab 標籤面板凍結
Tab 內容過多超過手機螢幕一屏，下拉後無法快速切換 Tab 標籤頁。為了方便使用者切換 Tab 標籤頁，行動端 Tab 標籤面板支援凍結。
選中 body ，行動端屬性選擇「手機重佈局」，「豎屏」顯示範本時，支援上下滑動 Tab 頁：
Tab 樣式為「預設樣式」、「上選單式」、「聯排式」時，Tab 標籤面板始終固定在「頁面頂端」。
Tab 樣式為「下選單式」、「滑動式」時，Tab 標籤面板不會凍結。
注：當 Tab 在絕對畫布中時，行動端 Tab 標籤面板不支援凍結 。
