OpenUI5中formContainers中的两列标签 [英] Two columns of labels in formContainers in OpenUI5
本文介绍了OpenUI5中formContainers中的两列标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用:
<f:layout>
<f:ResponsiveGridLayout columnsM="1"/>
</f:layout>
以及当我添加许多带有文本的标签时:
and when I add many labels with texts:
<f:FormElement label="{i18n>va1}">
<f:fields>
<Text
text="{data>/customer/name}"
/>
</f:fields>
</f:FormElement>
然后看起来像这样:
label: text
label: text
label: text
label: text
我想要这个:
label:text label:text
label:text label:text
我该如何实现?
@编辑
<Panel>
<my:FormPanel>
<f:Form id="id-form" editable="true">
<f:layout>
<f:ResponsiveGridLayout columnsM="1"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:title>
<Title text="title"/>
</f:title>
<f:formElements>
<f:FormElement label="lab1">
<f:fields>
<Text text="text1" />
</f:fields>
</f:FormElement>
<f:FormElement label="lab2">
<f:fields>
<Text text="text2" />
</f:fields>
</f:FormElement>
<f:FormElement label="lab3">
<f:fields>
<Text text="text3"/>
</f:fields>
</f:FormElement>
<f:FormElement label="lab4">
<f:fields>
<Text text="text4" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</FormPanel>
</Panel>
我在考虑一些网格布局，或者将lab1和lab2装到一个容器中，然后将lab3和lab4装到另一个容器中.
I was thinking about some grid layout or packing lab1 and lab2 to one container and lab3 and lab4 to another.
推荐答案
您可以使用span和layoutData
<VBox class="sapUiSmallMargin">
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="1"
emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0"
columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false" adjustLabelSpan="false"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Label">
<f:fields>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
<Text text="Label:" class="cLabel">
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</Text>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
</f:fields>
</f:FormElement>
<f:FormElement label="Label">
<f:fields>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
<Text text="Label:" class="cLabel">
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</Text>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</VBox>
CSS
.cLabel.sapMText {
color: #666;
}
输出
注意:根据您的要求调整span值
Note: Adjust the span values as per your requirement
这篇关于OpenUI5中formContainers中的两列标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
