決策報表日期元件行動端樣式

1.1 版本

1.2 應用場景

行動端透過日曆的方式篩選日期，之前只能透過報表塊、條件屬性、聯動等實現，範本製作程式非常麻煩，且樣式單一。

1.3 功能簡介

行動端可實現透過日曆的方式篩選日期，比如日報、行程等場景，易用性及體驗更強，能夠明顯看出日期所處月份，週號等。並支援為日期元件設定元件背景、邊框顏色、字元字體、圖示等。

1）點選下載範本：行程管理主頁-phone.frm，在 FineReport 設計器中開啟該範本。

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

3）點選「行動端」，點選「樣式範本」旁的「...」按鈕，可以看到 樣式範本 有四種樣式：「預設」、「導航日曆」、「簡約日曆」、「簡約日期樣式」，如下圖所示：

3.1 設定

「預設」樣式範本只可設定「通用屬性」，詳情參見：預設樣式範本 。

3.2 範例

1）樣式範本選擇「預設」。

2）「通用屬性> 屬性設定」 選擇「自訂」。

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

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

注：可點選日期或圖示開啟日曆面板選擇具體日期。

4.1 設定

「簡約日曆」樣式範本可設定「通用屬性」和「設定」。

4.1.1 通用屬性

「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。

4.1.2 設定

「設定」的「按鈕樣式」分為「標準」和「自訂」。

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

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

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

4.2 範例

1）樣式範本選擇「簡約日曆」。

2）「通用屬性>屬性設定」選擇「預設」。

3）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：

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

注：可點選上方的日期或下方的箭頭收起日曆面板。

4.3 年月、年

App 版本及 HTML5 行動端展現插件版本 V11.0.891 版本及之後，行動端支援自訂日期元件「年月、年」格式的「簡約日曆」樣式範本，效果如下圖所示：

5.1 設定

5.1.1 通用屬性

「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。

5.1.2 設定

「設定」的「按鈕樣式」分為「標準」和「自訂」。

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

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

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

5.2 範例

1）樣式範本選擇「導航日曆」。

2）「通用屬性>屬性設定」選擇「預設」。

3）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：

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

注1：「收起狀態」下，上下週切換可透過上方的「上一週」、「下一週」按鈕實現，也可左右滑動下方日期來實現。

注2：可透過點選上方的日期或下方的箭頭展開日曆面板。

6.1 設定

6.1.1 通用屬性

「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。

6.1.2 設定

「設定」的「按鈕樣式」分為「標準」和「自訂」。

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

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

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

6.2 範例

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

2）選擇「屬性」Tab 面板，設定「標籤名稱」為「帆軟」，如下圖所示：

3）選擇「行動端」Tab 面板，點選「樣式範本」旁的「...」按鈕。

4）樣式範本選擇「簡約日期樣式」。

5）「通用屬性>屬性設定」選擇「預設」。

6）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：

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