likes
comments
collection
share

SAP UI5 SimpleForm 在 size XL 下的布局开发

作者站长头像
站长
· 阅读数 11

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

SAP UI5 SimpleForm 在 size XL 下的布局开发

如果将表单放入全屏应用程序中,您还可以使用属性 singleContainerFullSize 将 columnsXL 设置为 3,以 12:12:0 的标签字段比例用单个表单组填充一列(12 个网格列由 标签、字段使用的 12 个网格列和空列使用的 0 个网格列),并将第二列和第三列留空。

例子:Form with single group in a column layout - Size XL - (12:12:0)

SAP UI5 SimpleForm 在 size XL 下的布局开发

如果表单包含多个表单组,还可以使用标签字段比例为 4:8:0 的两列布局(标签使用 4 个网格列,字段使用 8 个网格列,0 个网格列 由空列使用)。

SAP UI5 SimpleForm 在 size XL 下的布局开发

如果将表单放入全屏应用中并且包含多个表单组,您还可以使用标签字段比例为 12:12:0 的三列布局(标签使用 12 个网格列,12 个网格 字段使用的列,空列使用的 0 个网格列)。

SAP UI5 SimpleForm 在 size XL 下的布局开发

SAP UI5 SimpleForm 在 size XL 下的布局开发

如果您对 XL 屏幕使用三列布局,请不要对 L 和 M 屏幕使用两列布局,因为它会产生大量空白。 在这种情况下,请改用单列布局。

下面是 2 列布局下,造成很多空白区域浪费的例子:SAP UI5 SimpleForm 在 size XL 下的布局开发

正确的做法是使用 single column 布局:SAP UI5 SimpleForm 在 size XL 下的布局开发

与所有其他 XL-L-M-S 属性不同,直到 SAPUI5 版本 1.34 的 labelSpanL 和 labelSpanM 不遵循 XL-L-M-S 大小范式。 LabelSpanL 在包含多于一列的布局中设置标签跨度,而 labelSpanM 在仅包含一列的布局中设置标签跨度。 自 1.34 版以来,这已更改。 由于向下兼容,新参数 adjustLabelSpan 是必要的。 同样由于向下兼容,它的默认值为“true”,这导致 labelSpan 属性的旧行为。 要实现 labelSpan 属性的新的、正确的行为,您必须将 adjustLabelSpan 设置为“false”。