SAP UI5 SimpleForm layout 设计的一些推
2022-09-19 本文已影响0人
华山令狐冲
如果表单仅包含一个组,请不要使用组标题 - 而是使用表单标题。
看个具体的例子:

如果表单是页面上的唯一元素并且它有多个组,则可以使用组标题来标识每一个组。

如果表单是页面上的几个元素之一,例如表格和列表,请使用表单标题作为其标题。

One Page, Many Forms
如果您想强调某些组非常不同,请在一个页面上使用多个表单,而不是使用一个包含多个组的表单。 从视觉上看,这看起来比使用具有多个组的单个表单更加分离。 给每个表格一个有意义的标题。 如有必要,您也可以使用组来构建每个表单。 在这种情况下,还要给组一个标题。
下图是一个页面上拥有若干个 form 的例子:

下面是一个 form 拥有若干个 group 的例子:

Form 在不同尺寸类型下的布局
Size S (Smartphones and Dialogs)
保留默认行为(标签字段比率为 12:12:0 的单列布局)。

Size M (Tablet) – Full Screen
如果将表单放在分屏的详细信息部分,请使用标签字段比例为 4:7:1 的单列布局(标签使用 4 个网格列,字段使用 7 个网格列,1 空列使用的网格列)。

如果将表单放置在全屏应用程序中,请使用标签字段比例为 3:5:4 的单列布局(标签使用 3 个网格列,字段使用 5 个网格列,以及 4 个网格列 由空列使用)。

正如在响应性(断点)部分中已经解释的那样,大小 M 下降到 601 像素。 在这种尺寸下,3:5:4 的方法可能不够宽,无法容纳更长的标签和字段。 因此,如果您期望长标签或输入值,请使用标签字段比率 4:8:0(标签使用 4 个网格列,字段使用 8 个网格列,空列使用 0 个网格列)。
下面是一个效果:
