多列响应式表单? [英] Responsive Form with multiple columns?
问题描述
我定义了以下简单的形式:
I defined the following simple form:
<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 元素旁边?
How to place the red marked element next to Name1 element?
推荐答案
为了启用多列，属性 column* 或
In order to enable multiple columns, the property column* or the <layoutData> aggregation should be adjusted respectively in (Simple)Form.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
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>
</mvc:View>`
}).then(view => view.placeAt("content"))));<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>自 v1.56 起，新布局 sap.ui.layout.form.ColumnLayout 可以分配给 (Simple)Form 这使得类似报纸的风格"成为可能.无需插入任何标题、工具栏或任何其他布局数据即可拥有多列.
As of v1.56, the new layout sap.ui.layout.form.ColumnLayout can be assigned to (Simple)Form which enables "a newspaper like style" without the need to insert any Titles, Toolbars, or any additional layout data to have multiple columns.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
xmlns="sap.m"
>
<form:SimpleForm 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>
</mvc:View>`
}).then(view => view.placeAt("content"))));<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="edge"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>如果需要更多调整，布局数据sap.ui.layout.form.ColumnElementDataAPI 可以赋值.例如:
In case more adjustments are required, the layout data sap.ui.layout.form.ColumnElementDataAPI can be assigned. E.g.:
<Label text="Label 3">
<layoutData>
<form:ColumnElementData cellsSmall="3" /> <!-- default: 12 -->
</layoutData>
</Label>
资源
- ColumnLayout API 参考
- ColumnLayout 的测试页面 (源码可以找到这里)
- ColumnLayout API reference
- Test Page for ColumnLayout (source code can be found here)
Resources
这篇关于多列响应式表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
