我定义了以下简单形式:
<form:SimpleForm id="SimpleFormChange354"
editable="true"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="2"
labelSpanL="2"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="2"
columnsM="1"
singleContainerFullSize="false"
>
<Label text="Name1"/>
<Input/>
<Label text="Name2"/>
<Input/>
<Label text="Name3"/>
<Input/>
</form:SimpleForm>
如您所见:
如何将红色标记的元素放置在 Name1 元素旁边？
最佳答案
为了启用多列，属性 column*或<layoutData>聚合应在(简单)表单中分别进行调整。
使用 ColumnLayout
As of v1.56 ，新布局sap/ui/layout/form/ColumnLayout可以分配给(简单)表单，它可以实现“类似报纸的样式”，而无需插入任何标题、工具栏或任何其他布局数据来拥有多列。
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/Fragment",
], async Fragment => {
"use strict";
const control = await Fragment.load({
definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form" xmlns="sap.m"
title="Multiple Columns via ColumnLayout"
editable="true"
layout="ColumnLayout"
columnsM="2">
<Label text="Label 1"/>
<Input/>
<Label text="Label 2"/>
<Input/>
<Label text="Label 3"/>
<Input/>
</form:SimpleForm>`,
});
control.placeAt("content");
});<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>如果需要更多调整，layout data sap/ui/layout/form/ColumnElementData 可以被分配。例如:
<Label text="Label 3">
<layoutData>
<form:ColumnElementData cellsSmall="3"/><!-- default: 12 -->
</layoutData>
</Label>
资源
使用ResponsiveGridLayout
不是 ResponsiveLayout 即 deprecated从 UI5 v1.93 开始。 Responsive<strong>Grid</strong>Layout仍然支持。
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/Fragment",
], async Fragment => {
"use strict";
const controls = await Fragment.load({
definition: `<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
xmlns:layout="sap.ui.layout"
xmlns="sap.m">
<form:SimpleForm
title="Multiple Columns via GridData"
editable="true"
layout="ResponsiveGridLayout">
<Label text="Label 1">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
<Label text="Label 2">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
<Label text="Label 3">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
</form:SimpleForm>
<form:SimpleForm
title="Multiple Columns via Containers (columns* + sap.ui.core.Title)"
editable="true"
layout="ResponsiveGridLayout"
columnsM="2">
<core:Title text="Container 1"/>
<Label text="Label 1"/>
<Input/>
<core:Title text="Container 2"/>
<Label text="Label 2"/>
<Input/>
<Label text="Label 3"/>
<Input/>
</form:SimpleForm>
</core:FragmentDefinition>`,
});
controls.map(control => control.placeAt("content"));
});<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>资源
关于sapui5 - 具有多列的响应式表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50216940/