个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我定义了以下简单形式:
<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/
27
4
0
我正在使用 sapui5 创建一个表。我想知道我是否可以将升序排序和降序排序的默认图标更改为我自己的图标？ 补充问题:有没有一种方法可以在标题中显示我的自定义图标而无需先点击它？ 最佳答案 只需在 W
我如何在 SapUI5 中构建一个 XML View 来迭代 JSONModel 中的所有元素？ 到目前为止，我有一个 Controller : sap.ui.define([ "sap/ui
我是一名优秀的程序员,十分优秀！