Блог

У меня есть простая форма, которая выглядит следующим образом:

На большом экране это выглядит довольно маленьким. Я хотел бы увеличить размер и ширину.

Это код:

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

Элементы управления по-прежнему выглядят очень маленькими:

Как я могу увеличить размер элементов управления?

Свойства labelSpan<ScreenSize> и emptySpan<ScreenSize> — это те, которые управляют шириной фактических элементов в «строке» формы.

Больше информации здесь: https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.SimpleForm

Например, для M у вас есть диапазон меток 3 и пустой диапазон 3 => оставляя 6 из 12 для фактических элементов. Попробуйте уменьшить labelSpanM и emptySpanM увеличить ширину, занимаемую элементом Text , Button и Input

При этом я не думаю, что выбор простой формы был здесь разумным выбором — почему бы вам не поместить три элемента непосредственно в VBox?

При этом также следует отметить, что в случае, если вы реализуете экран аутентификации внутри приложения, вам следует переосмыслить это и позволить уровням аутентификации позаботиться об этом (где бы ни работало ваше приложение)

Обновление после обновления вопроса: в зависимости от того, чего вы хотите достичь, вы можете просто добавить класс css к элементу управления и добавить немного css. это «ручной» способ. вы можете добавить пользовательскую тему и оформить кнопки там. вы можете добавить пользовательские расширения стандартных элементов управления, например, пользовательскую кнопку в качестве расширения стандартной кнопки. и полностью изменить там рендеринг. Я думаю, это более или менее возможности