天天看點

SAP UI5 SimpleForm 的 two-column layout 布局Size L (Desktop Screens)Size XL (Desktop Wide Screens)

如果您将表單放置在全屏應用程式中并且它包含多個表單組,請使用标簽字段比例為 12:12:0 的兩列布局(标簽使用 12 個網格列,标簽使用 12 個網格列 字段和空列使用的 0 個網格列)。

看個具體的例子:Form with several form groups (two columns) – Size M (12:12:0)

SAP UI5 SimpleForm 的 two-column layout 布局Size L (Desktop Screens)Size XL (Desktop Wide Screens)

Size L (Desktop Screens)

如果表單包含單個表單組,請使用标簽字段比例為 3:5:4 的單列布局(标簽使用 3 個網格列,字段使用 5 個網格列,以及空列)。

SAP UI5 SimpleForm 的 two-column layout 布局Size L (Desktop Screens)Size XL (Desktop Wide Screens)

如果表單包含多個表單組,您還可以使用标簽字段比例為 12:12:0 的兩列布局(标簽使用 12 個網格列,字段使用 12 個網格列,0 個網格列 由空列使用)。 正如在響應性(斷點)部分中已經解釋的那樣,大小 L 下降到 1025 像素。 在這種尺寸下,放置在字段旁邊的長标簽可能不适合較小的 L 尺寸螢幕(尤其是在拆分應用程式中)。 是以标簽放在字段上方。

下圖的例子:Form with several form groups (two columns) – Size L (12:12:0)

SAP UI5 SimpleForm 的 two-column layout 布局Size L (Desktop Screens)Size XL (Desktop Wide Screens)

Size XL (Desktop Wide Screens)

如果表單包含單個表單組,請使用标簽字段比例為 3:5:4 的單列布局(标簽使用 3 個網格列,字段使用 5 個網格列,以及 空列)。

例子:Form with a single form group (one column) – Size XL (3:5:4)

SAP UI5 SimpleForm 的 two-column layout 布局Size L (Desktop Screens)Size XL (Desktop Wide Screens)

響應式網格布局具有新屬性 singleContainerFullSize。 此屬性使您可以在表單中插入空列:例如,您可以将屬性 columnsXL 設定為 2,用标簽字段比為 4:8:0 的單個表單組填充一列(4 個網格列由 标簽、字段使用的 8 個網格列和空列使用的 0 個網格列),并将第二列留白。