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

问题描述

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

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

这是代码：

<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>

控件看起来仍然很小：

如何增加控件的大小？

标签： sapui5

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

例如，对于 M，您的标签跨度为 3，空跨度为 3 => 将总共 12 个中的 6 个留给实际元素。尝试减少labelSpanM和emptySpanM增加元素的宽度Text，Button并且Input

话虽如此，我认为这里选择简单的Form并不是一个明智的选择——为什么不把这三个元素直接放到VBox中呢？

话虽如此，如果您在应用程序中实现身份验证屏幕，您应该重新考虑这一点并让身份验证层来处理（无论您的应用程序在哪里运行）

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

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

问题描述

解决方案

推荐阅读