本文介绍 SAP UI5 Responsive Grid Layout 布局原理。

默认状况下，表单和简略表单的大小 M 在响应式网格布局中也具备单列布局。 然而，在大小为 M 的状况下，标签与相应的输出字段或值位于同一行，并且表单组位于彼此下方。

默认状况下，标签字段比例为 2:10:0：

  • 标签应用响应式网格布局的 2 个网格列。
  • 字段应用响应式网格布局的 10 个网格列。
  • 响应式网格布局的 0 列被空列应用。

请依据您的利用须要更改默认的 2:10:0。

留神，不要把上述的网格列同 columns 的概念混同起来。

看个具体的例子：Form in size M (2:10:0)

上图的例子，label 和 Input 独特占据 form layout 整个 column. 而如前所述，M 类型是 single-column layout.

size L

默认状况下，大小 L 的表单和简略表单在响应式网格布局中应用两列布局。 这意味着表单组彼此相邻搁置，以便在一个屏幕上显示所有信息并防止滚动。 在这些列中，标签与相应的输出字段或值位于同一行。 因而表单组采纳 Z 布局（按行而不是按列读取方向）。

标签字段比例默认为 4:8:0：

  • 标签应用响应式网格布局的 4 个网格列。
  • 字段应用响应式网格布局的 8 个网格列。
  • 响应式网格布局的 0 个网格列被空列应用。

例子：Form in size L (4:8:0)

sap.ui.core.CSSSize：示意 CSS 大小值的字符串类型。

CSS 标准将此称为 <length> 类型。 容许的值是 CSS 大小，例如“1px”或“2em”或“50%”。 非凡值 auto 和 inherit 以及应用 CSS3 calc(expression) 运算符的数学表达式也被承受。 此外，示意以后视口尺寸百分比的长度单位：宽度 (vw)、高度 (vh)、两者中的较小者 (vmin) 或两者中的较大者 (vmax) 也能够定义为 CSS 大小。