代码之家 › 专栏 › 技术社区 › Michu93

OpenUI5中formContainers中的两列标签

sapui5 layout xml

0

Michu93 · 技术社区 · 7 年前

<f:layout>
         <f:ResponsiveGridLayout columnsM="1"/>
</f:layout>

当我添加许多带有文本的标签时:

 <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打包到另一个容器中。

1 回复 | 直到 7 年前

1

Inizio 7 年前

您可以通过使用 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>

.cLabel.sapMText {
  color: #666;
}

输出

注意:调整压力 跨度 根据您的要求选择合适的值