反饋已提交

網絡繁忙

Pad自适應

1. 概述

1.1 版本

報表設計器版本
App
HTML5 行動端展現插件
11.0V11.0V11.0

1.2 應用場景

行動辦公場景下,使用者攜帶電腦非常不便,手機查看工程閱讀困難,Pad成為了最佳的行動辦公裝置。

為了減少開發和維護耗時,手機和Pad端往往共用一套範本,兩者分別自適應展示即可。

1.3 功能簡介

對於行動端決策報表,配置了 行動端自適應 後,Pad 端可自適應展示,與手機端略有不同。

2. Body 組件

行動端佈局
body佈局組件縮放
預覽效果
重佈局--一行一個組件,可能出現上下捲軸
保留佈局自適應佈局橫向自適應寬高等比例尺,橫向自適應充滿,縱向可能出現捲軸
雙向自適應寬高等比例尺,橫向/縱向自適應充滿
絕對佈局
固定大小裁剪四週空白部分後,寬高等比例尺,橫向自適應充滿,縱向可能出現捲軸
適應區域裁剪四週空白部分後,寬高等比例尺,橫向/縱向自適應充滿

3. 報表塊

3.1 行動端重佈局

3.1.1 組件預覽效果

是否單個報表塊
報表塊自適應預覽效果

-單個報表塊充滿body
橫向自適應寬度充滿,高度自適應,支援最大高度限制
縱向自適應有最大高度限制
雙向自適應寬高自適應充滿,支援最大高度限制
不自適應高度自適應,支援最大高度限制

3.1.1 組件凍結效果

報表塊自適應範本中是否僅單個報表塊組件是否限高行凍結效果列凍結
橫向自適應-支援不支援
支援
不支援
縱向自適應--不支援支援
雙向自適應--不支援不支援
不自適應
-支援支援
支援
不支援

3.2 行動端保留佈局

3.2.1 組件預覽效果

body佈局組件縮放報表塊是否佔據整行報表塊自適應預覽效果
自適應佈局橫向自適應橫向自適應寬度充滿,高度自適應,支援最大高度限制
縱向自適應有最大高度限制
雙向自適應寬高自適應充滿,支援最大高度限制
不自適應高度自適應,支援最大高度限制
-和pc端一緻,寬高按比例分配
雙向自適應--
絕對佈局---

3.2.2 組件凍結效果

分類報表塊自適應是否限高行凍結
列凍結
組件橫向自適應,且報表塊為單行報表塊
橫向自適應
支援不支援
不支援
縱向自適應-不支援支援
雙向自適應-不支援不支援
不自適應支援支援
不支援
其他情況下橫向自適應-支援不支援
縱向自適應-不支援支援
雙向自適應-不支援不支援
不自適應-支援支援

4. 圖表塊

4.1 行動端重佈局

圖表寬高預覽效果
表單畫布寬度≤高度-橫向充滿,寬高等比縮放

表單畫布寬度>高度

圖表寬度≤裝置寬度橫向充滿,寬高等比放大
圖表寬度>裝置寬度

面積相等原則,高度拉長

若有最大高度限制,最大高度為顯示區域的80%

單個圖表塊-充滿螢幕

4.2 行動端保留佈局

佈局樣式預覽效果
橫向自適應

若圖表塊與其他組件並列一行,與 PC 端一緻,寬高等比縮放

若圖表塊佔據整行,高度自適應,與報表塊效果一緻

雙向自適應與 PC 端一緻,寬高按比例分配
固定大小
適應區域

5. 元件

5.1 行動端重佈局

元件預覽效果
標簽元件內容自適應高度
正文域元件固定高度
無線電鈕組/複選框組(內容≤5項)內容自適應高度
無線電鈕組/複選框組(內容>5項)固定高度,內容可捲動
其他元件固定高度

5.2 行動端保留佈局

分類元件預覽效果

自適應佈局-橫向自適應

絕對佈局-固定大小

標簽元件元件寬高等比縮放,內容超出顯示區域可捲動
正文域元件元件寬高等比縮放,內容超出顯示區域可捲動
無線電鈕組/複選框組

元件寬高等比縮放

超出顯示區域可捲動,不足顯示區域則根據內容自適應高度

其他元件

元件寬高等比縮放

但有最大和最小高度顯示,寬度中元件內容顯示不下則修剪

自適應佈局-雙向自適應

絕對佈局-適應區域

標簽元件元件寬高按比例分配,內容超出顯示區域可捲動
正文域元件元件寬高按比例分配,內容超出顯示區域可捲動
無線電鈕組/複選框組

元件寬高按比例分配

超出顯示區域可捲動,不足顯示區域則根據內容自適應高度

其他元件

元件寬高按比例分配

但有最大和最小高度顯示,寬度中元件內容顯示不下則修剪

6. Tab塊

6.1 行動端重佈局

是否單個

 Tab塊

Tab中是否

為單個組件

Tab 預覽效果Tab 中組件預覽效果
單個 Tab塊自適應充滿,高度固定按照對應組件在重佈局下單個組件的顯示的效果來顯示
單個 Tab塊自適應充滿,高度固定

按照對應組件在重佈局下非單個組件的顯示的效果來顯示

高度超出螢幕則在 Tab 裏出現上下捲軸

-

Tab 塊的顯示高度根據當前Tab頁中的組件內容自適應,Tab內無捲軸

切換 Tab 頁,可能會引起tab高度的變化

按照對應組件在重佈局下非單個組件的顯示的效果來顯示

6.2 行動端保留佈局

佈局樣式tab預覽效果
橫向自適應
  • 若Tab 塊單獨成行,Tab 塊中報表塊單獨成行,根據當前 Tab 頁中的組件內容自適應,Tab 內沒有捲軸

  • 其他情況下,Tab 塊寬高等比縮放,Tab 內沒有捲軸

雙向自適應Tab塊寬高按比例分配,Tab內沒有捲軸
固定大小Tab塊寬高等比縮放,Tab內沒有捲軸
適應區域Tab塊寬高按比例分配,Tab內沒有捲軸

7. 組件隱藏

7.1 普通隱藏

圖表塊、報表塊、元件的 PAD 端隱藏情況如下表所示:

注:Tab塊不支援隱藏。

是否可見佈局樣式預覽效果
可見-組件正常顯示
不可見重佈局組件隱藏,不佔位
不可見絕對佈局組件隱藏,佔位
不可見自適應佈局

組件隱藏,組件位置會被週圍組件自適應充滿,組件不佔位

7.2 JS 隱藏組件

JS 控制組件是否可見,PAD 端生效情況如下表所示:

佈局樣式元件位置JS事件觸發效果
重佈局-

JS可以控制組件可見不可見

當不可見時下方組件自動向上填充

保留佈局-橫向自適應元件佔整行
元件不佔整行

JS可以控制組件可見不可見

當不可見時組件位置留空,其他組件不會自適應充滿

保留佈局-雙向自適應-
保留佈局-固定大小-
保留佈局-適應區域-

7.3 Tab 中組件隱藏

Tab 中的圖表塊、報表塊、元件,PAD 端隱藏情況如下表所示:

是否可見佈局樣式預覽效果
可見-組件正常顯示
不可見重佈局組件隱藏,不佔位
不可見保留佈局

組件隱藏,佔位


附件列表


主題: 行動端應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

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

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

不再提示

10s後關閉

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

反馈已提交

网络繁忙