SAP UI5 SimpleForm 的 two-column layout 布局

如果您将表单放置在全屏应用程序中并且它包含多个表单组,请使用标签字段比例为 12:12:0 的两列布局(标签使用 12 个网格列,标签使用 12 个网格列 字段和空列使用的 0 个网格列)。

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

SAP UI5 SimpleForm 的 two-column layout 布局_第1张图片

Size L (Desktop Screens)

如果表单包含单个表单组,请使用标签字段比例为 3:5:4 的单列布局(标签使用 3 个网格列,字段使用 5 个网格列,以及空列)。

SAP UI5 SimpleForm 的 two-column layout 布局_第2张图片

如果表单包含多个表单组,您还可以使用标签字段比例为 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 布局_第3张图片

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 布局_第4张图片

响应式网格布局具有新属性 singleContainerFullSize。 此属性使您可以在表单中插入空列:例如,您可以将属性 columnsXL 设置为 2,用标签字段比为 4:8:0 的单个表单组填充一列(4 个网格列由 标签、字段使用的 8 个网格列和空列使用的 0 个网格列),并将第二列留空。

你可能感兴趣的:(SAP UI5 SimpleForm 的 two-column layout 布局)