本文介紹 SAP UI5 Responsive Grid Layout 佈局原理。

預設情況下，表單和簡單表單的大小 M 在響應式網格佈局中也具有`單列布局`。 但是，在大小為 M 的情況下，標籤與相應的輸入欄位或值位於`同一行`，並且表單組位於彼此下方。

預設情況下，標籤欄位比例為 2:10:0：

- 標籤使用響應式網格佈局的 2 個`網格列`。
- 欄位使用響應式網格佈局的 10 個網格列。
- 響應式網格佈局的 0 列被空列使用。

請根據您的應用需要更改預設的 2:10:0。

注意，不要把上述的網格列同 `columns` 的概念混淆起來。

看個具體的例子：Form in size M (2:10:0)

![](https://img-blog.csdnimg.cn/img_convert/959a51e7580e0245e0c630d4abe970c8.png)

上圖的例子，label 和 Input 共同佔據 form layout 整個 column. 而如前所述，M 型別是 single-column layout.

# size L

預設情況下，大小 L 的表單和簡單表單在響應式網格佈局中使用兩列布局。 這意味著表單組彼此相鄰放置，以便在一個螢幕上顯示所有資訊並避免滾動。 在這些列中，標籤與相應的輸入欄位或值位於同一行。 因此表單組採用 Z 佈局（按行而不是按列讀取方向）。

標籤欄位比例預設為 4:8:0：

- 標籤使用響應式網格佈局的 4 個網格列。
- 欄位使用響應式網格佈局的 8 個網格列。
- 響應式網格佈局的 0 個網格列被空列使用。

例子：Form in size L (4:8:0)

![](https://img-blog.csdnimg.cn/img_convert/70644cc3bdcdf20ad38afbd522485d2e.png)

sap.ui.core.CSSSize：表示 CSS 大小值的字串型別。

CSS 規範將此稱為 `<length>` 型別。 允許的值是 CSS 大小，例如“1px”或“2em”或“50%”。 特殊值 auto 和 inherit 以及使用 CSS3 calc(expression) 運算子的數學表示式也被接受。 此外，表示當前視口尺寸百分比的長度單位：寬度 (vw)、高度 (vh)、兩者中的較小者 (vmin) 或兩者中的較大者 (vmax) 也可以定義為 CSS 大小。</length>

SAP UI5 SimpleForm M 和 L 型表單的 label 和 input 分配講解

相關文章