sapui5 - 具有多列的响应式表单?
问题描述
我定义了以下简单的形式:
<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元素旁边?
解决方案
为了启用多列,需要在(Simple)Form中分别调整属性column*
或聚合。<layoutData>
使用ColumnLayout
从 v1.56 开始,可以将新布局sap/ui/layout/form/ColumnLayout
分配给 (Simple)Form,从而启用“类似报纸的样式”,而无需插入任何标题、工具栏或任何其他布局数据以具有多列。
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>
如果需要更多调整,可以分配布局数据。sap/ui/layout/form/ColumnElementData
例如:
<Label text="Label 3">
<layoutData>
<form:ColumnElementData cellsSmall="3"/><!-- default: 12 -->
</layoutData>
</Label>
资源
使用ResponsiveGridLayout
不是ResponsiveLayout
因为UI5 v1.93已弃用。仍然支持。ResponsiveGridLayout
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>
资源
推荐阅读
- python - 代数表达式的格式
- typescript - 在 Midnight Commander 中查看 typescript .ts 文件
- reactjs - 我们什么时候应该使用 es6 格式在 react Typescript 中不使用 props 来创建组件?
- kubernetes - 使用 kops 创建 Kubernetes 集群失败
- javascript - 图像尺寸问题,宽度和高度不起作用
- android - Android Automotive types.hal 更改未自动生成
- java - EWS Java API 2.0 - 找不到自动发现服务
- python - 在 List Python 中查找位于特定字符串之间的字符串
- c# - 如何在 .NET Core Kestrel 中禁用 HTTP URL 方向
- user-interface - 在 Wxpython 中拖放图像