0
点赞
收藏
分享

微信扫一扫

SAP UI5 SimpleForm 的 two-column layout 布局

王传学 2022-09-24 阅读 145

如果您将表单放置在全屏应用程序中并且它包含多个表单组,请使用标签字段比例为 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)

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

SAP UI5 SimpleForm 的 two-column layout 布局_desktop_02

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

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 布局_desktop_04

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

举报

相关推荐

0 条评论