［通用］元件行動端樣式範本- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 版本

報表伺服器版本	App 版本	HTML5 行動端展現插件版本	功能變動
11.0	V11.0	V11.0	-

1.2 應用場景

使用者遇到下面場景時，需要調整元件樣式：

範本中元件高度不一，為了範本美觀性，需要元件高度一致。
有些元件不需要設定元件邊框，例如無線電鈕組元件。
非淺色背景中，元件背景顏色與所處背景不統一。
元件的字體顏色與範本整體效果不符。

1.3 生效範圍

報表類型	元件類型	元件位置
決策報表	所有元件	參數面板、body

1.4 類型

1）元件的行動端樣式範本分為「預設」和「擴展樣式」。所有元件的行動端樣式範本都支援「預設」樣式，個別元件支援擴展樣式，具體如下表所示：

注：「擴展樣式」指除「預設」外的其他樣式。

樣式範本	元件類型
預設	所有元件
簡約日曆、導航日曆、簡約日期樣式	日期元件
簡約下拉樣式	下拉框元件、下拉複選框元件
膠囊按鈕、聯排按鈕、圖文按鈕	無線電鈕組元件、複選按鈕組元件

2）開啟「元件顯示增強」後，選中元件，「行動端>樣式範本」選擇「預設」，「通用屬性>屬性設定」選擇「預設」時，「範本主題>元件樣式>行動端」的設定才會生效；否則，行動端元件的樣式按照「行動端>樣式範本」的設定生效。

3）開啟「元件顯示增強」後，「行動端>樣式範本」中的「預設」和「擴展樣式」的「通用屬性>屬性設定」選擇自訂時，多了「主題色」設定項。

4）「行動端>樣式範本>通用屬性>屬性設定」選擇「自訂」時：

未開啟「元件顯示增強」時，「通用屬性」中所有設定項對「預設」都生效，但只有「組件背景」對「擴展樣式」生效。
開啟「元件顯示增強」時，「通用屬性」中所有設定項對「預設」都生效，對「擴展樣式」都不生效。

2. 預設樣式範本

2.1 功能簡介

2.1.1 準備範本

1）開啟 FineReport 設計器，點選菜單欄「檔案>建立其他範本>建立決策報表」。

2）選擇「建立空白範本」，點選「確定」，如下圖所示：

3）將元件中的「文字元件」拖入空白畫布中，如下圖所示：

2.1.2 功能說明

1）在組件設定介面選中「文字元件」，在屬性介面中點選「行動端>樣式範本」旁的「...」按鈕，如下圖所示：

2）「預設」樣式範本分為通用屬性和設定兩部分，如下圖所示：

3）通用屬性的屬性設定可設定為「預設」或「自訂」。

通用屬性的屬性設定為「預設」時，通用屬性不可設定，介面如下圖所示：

通用屬性的屬性設定為「自訂」時，支援設定通用屬性的組件背景、邊框線型、邊框顏色、圓角邊框、圖示顏色、字體，介面如下圖所示：

各設定項說明如下表所示：

設定項	說明
組件背景	支援設定組件背景的顏色
邊框線型	支援設定邊框線型
邊框顏色	支援設定邊框顏色
圓角邊框	支援設定邊框圓角的大小
圖示顏色	支援設定圖示顏色
字體	支援設定字號、字體顏色、斜體、粗體

4）設定不支援設定。

2.2 範例

2.2.1 準備範本

準備範本同2.1.1，此處不再贅述。

2.2.2 屬性設定為自訂

1）在組件設定介面選中「文字元件」，在屬性介面中點選「行動端>樣式範本」旁的「...」按鈕，如下圖所示：

2）屬性設定選擇「自訂」，設定組件背景、邊框線型、邊框顏色、圓角邊框、圖示顏色，如下圖所示：

2.2.3 效果預覽

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

3. 擴展樣式範本

注：「行動端>樣式範本」選擇「擴展樣式」，「通用屬性>屬性設定」選擇「自訂」時，「通用屬性」中只有「組件背景」對「擴展樣式」生效，其餘「通用屬性」設定項均不生效。

1）日期元件的擴展樣式，詳情參見：[通用]日期行動端日曆樣式

2）下拉框元件、下拉複選框元件的擴展樣式，詳情參見：[通用]行動端簡約下拉樣式

3）無線電鈕組元件、複選按鈕組元件的擴展樣式，詳情參見：[通用]無線電鈕組行動端按鈕組樣式

4. 元件顯示增強

4.1 所有元件通用

1）HTML5 行動端展現插件 V11.0.82 版本之後適配「元件顯示增強」，詳情參見：元件顯示增強。

2）點選菜單欄「範本>元件顯示增強」，勾選「開啟元件顯示增強」，點選「確定」，即可開啟功能。

3）開啟「元件顯示增強」後，選中元件，「行動端>樣式範本」選擇「預設」，「通用屬性>屬性設定」選擇「預設」時，「範本主題>元件樣式>行動端」的設定才會生效；否則，行動端元件的樣式按照「行動端>樣式範本」的設定生效。

4）開啟「元件顯示增強」後，「行動端>樣式範本」中的「預設」和「擴展樣式」的「通用屬性>屬性設定」選擇自訂時，多了「主題色」設定項。

5）「通用屬性>屬性設定」選擇「自訂」時：

未開啟「元件顯示增強」時，「通用屬性」中所有設定項對「預設」都生效，但只有「組件背景」對「擴展樣式」生效。
開啟「元件顯示增強」時，「通用屬性」中所有設定項對「預設」都生效，對「擴展樣式」都不生效。

具體如下表所示：

	未開啟元件顯示增強		開啟元件顯示增強
樣式\通用屬性設定項	組件背景	其他設定	主題色	組件背景	其他設定
預設	√	√	√	√	√
擴展樣式	√	×	×	×	×

4.2 下拉類元件

1）下拉類元件點選後從側邊展開，更改為從底部展開，更符合使用者的操作習慣。如下圖所示：

2）下拉框/單選下拉樹元件，介面和交互優化，簡化使用者過濾步驟。

使用者展開元件面板時，刪除「確定」按鈕。使用者選擇選項，或點選「清空」後點選「查詢」可直接進行過濾，如下圖所示：

3）搜尋顯示全螢幕，能夠展示更多搜尋內容。

4.3 檔案元件

上傳圖片的交互和操作流程優化。

1）未新增圖片時的介面優化，點選「+」新增圖片。

2）查看圖片支援放大。

3）縮略圖支援點選右上角直接刪除。

4）如果未顯示的圖片超過 6 張，點選摺疊的圖片「+N」，即可批量查看縮略圖，並支援查看大圖、刪除圖片等操作。

5. 使用 JS 語句更改元件值顏色

注：修改元件值顏色時，JavaScript 語句優先大於元件「行動端>樣式範本」中的設定。

5.1 準備範本

1）開啟 FineReport 設計器，點選菜單欄「檔案>建立其他範本>建立決策報表」，點選「建立空白範本」，點選「確定」，如下圖所示：

2）在決策報表中拖入一個「文字元件」，在右側「屬性設定」面板中選中「文字元件」，設定元件值為「字串>123」，如下圖所示：

5.2 新增初始化事件後

1）在右側「屬性面板」中選中「文字元件」，點選「事件」，點選「+」，新增「初始化後」事件，如下圖所示：

JavaScript 程式碼如下所示：

this.css("color","red");

2）其他兩種修改元件顏色的 JavaScript 語句如下所示：

this.css("color","#00ff00");

this.css("color","rgb(0,0,255)");

5.3 效果預覽

已經是第一篇

已經是最後一篇

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

［通用］元件行動端樣式範本