SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现相关的知识,希望对你有一定的参考价值。

对于 SAP UI5 SimpleForm 的每种尺寸,我们可以定义用于标签(labelSpanXL、labelSpanL、labelSpanM、labelSpanS)、字段(隐式)和空网格列(emptySpanXL、emptySpanL、emptySpanM、emptySpanS)的网格列数。

可选的空网格列放置在输入元素​​之后​​​。 它们避免了输入字段的​​过度拉伸​​。 该比率显示为 x:y:z,其中 x 是标签使用的网格数,y 代表字段,z 代表空列。

下面是一个 form 表单里标签,输入字段和空列的比例为 3:5:4 的例子。

SAP

要使响应式网格布局中的属性 labelSpanXL、labelSpanL、labelSpanM 和 labelSpanS 在 Forms 和 SimpleForms 中按预期工作(例如 labelSpanL 设置大小为 L 的标签跨度),必须将属性 adjustLabelSpan 从其默认值 true 更改为 false。

adjustLabelSpan 为 false 的含义:

  • labelSpanL 用于多个表单组排列在一列以上的表单中的标签; 它适用于 – M 和 L 屏幕尺寸。
  • labelSpanM 用于排列在一列中的表格中的标签; 它也适用于 M 和 L 屏幕尺寸。
    出于向后兼容的原因,属性 adjustLabelSpan 的默认值设置为 true。

默认情况下,表单和简单表单在大小为 S 的响应式网格布局中使用​​单列布局​​。 这意味着表单组在单个列中位于彼此下方,并且标签位于字段上方以避免标签被截断。

看个具体的例子:

SAP

标签字段比例默认为 12:12:0:

  • 标签使用响应式网格布局的 12 个网格列。
    (标签处理整行的空间。)
  • 字段使用响应式网格布局的 12 个网格列。
    (一个字段处理一整行的空间。)
  • 响应式网格布局的 0 个网格列被空列使用。
    (字段右侧没有空白区域。)

以上是关于SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现的主要内容,如果未能解决你的问题,请参考以下文章

SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解

SAP UI5 Form 控件的 ColumnLayout 布局特性

SAP UI5 XML 视图里 label 和 text 控件文本对齐问题

sap.ui.require in SAP UI5 and require in nodejs

sap.ui.require in SAP UI5 and require in nodejs

sap.ui.require in SAP UI5 and require in nodejs