Question

我有一个简单的表格，如下所示：

在大屏幕上，它看起来很小。我想增加尺寸和宽度。

这是代码：

<Page title="{i18n>authorization}">
        <content>
            <VBox alignItems="Center">
                <f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
                    adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
                    singleContainerFullSize="true">
                    <f:content>
                        <Label text=""/>
                        <Text text="{i18n>userAuthorize}"/>
                        <Label text=""/>
                        <Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
                        <Label text=""/>
                        <Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
                            ariaDescribedBy="acceptButtonDescription genericButtonDescription">
                            <layoutData>
                                <FlexItemData growFactor="1"/>
                            </layoutData>
                        </Button>
                    </f:content>
                </f:SimpleForm>
            </VBox>
        </content>
    </Page>

更新

我删除了简单的表单并将控件放在 VBOX 中。

    <Page title="{i18n>authorization}">
        <content>
            <VBox alignItems="Center">
                <Label text=""/>
                <Text text="{i18n>userAuthorize}"/>
                <Label text=""/>
                <Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
                <Label text=""/>
                <Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
                    ariaDescribedBy="acceptButtonDescription genericButtonDescription">
                    <layoutData>
                        <FlexItemData growFactor="1"/>
                    </layoutData>
                </Button>
            </VBox>
        </content>
    </Page>

控件看起来仍然很小：

如何增加控件的大小？

Answer 1

属性 labelSpan<ScreenSize> 和 emptySpan<ScreenSize> 是控制表单“行”中实际元素宽度的属性。

更多信息在这里：https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.SimpleForm

例如，对于 M，您的标签跨度为 3，空跨度为 3 => 在实际元素的总数 12 中留下 6 个。尝试减少 labelSpanM 和 emptySpanM 以增加元素 Text、Button 和 Input

的宽度

话虽如此，我认为这里选择简单的 Form 不是明智的选择 - 为什么不将三个元素直接放入 VBox 中？

也就是说，如果您在应用程序中实现身份验证屏幕，您应该重新考虑这一点，让身份验证层负责（无论您的应用程序在哪里运行）

问题更新后更新：根据您想要实现的目标，您可以简单地向控件添加一个 css 类并添加一些 css。这就是“手动”方式。您可以添加自定义主题并在那里设置按钮样式。您可以添加标准控件的自定义扩展，例如自定义按钮作为标准按钮的扩展。并完全改变那里的渲染。我认为，这或多或少是可能的

如何增加输入和按钮的大小

1 个答案: