Sapui5 如何将图标放置在输入字段旁边或输入字段内_Sapui5

Sapui5 如何将图标放置在输入字段旁边或输入字段内

sapui5

Sapui5 如何将图标放置在输入字段旁边或输入字段内,sapui5,Sapui5,如何将图标放在输入字段旁边或输入字段内？问题是，图标会改变表单。通常是这样的：但当我添加图标（下面的代码）时，它会替换Dauer输入字段有没有办法让它看起来干净，就在它旁边？还是在里面的输入字段更好我可以用CSS使按钮变小，但它们之间仍然有差距。。而且它不会自动移动最好的解决方案就像上面的数据，里面有一个小图标，我可以点击，或者像图标在Dauer旁边，Dauer的输入字段和？图标之间没有间隙 PS：我只是想这样（我会在以后决定哪个选项更好。但这是可能的？）您可以使用下面的代码实

如何将图标放在输入字段旁边或输入字段内？

问题是，图标会改变表单。通常是这样的：

但当我添加图标（下面的代码）时，它会替换Dauer输入字段

有没有办法让它看起来干净，就在它旁边？还是在里面的输入字段更好

我可以用CSS使按钮变小，但它们之间仍然有差距。。而且它不会自动移动

最好的解决方案就像上面的数据，里面有一个小图标，我可以点击，或者像图标在Dauer旁边，Dauer的输入字段和

？

图标之间没有间隙

PS：我只是想这样（我会在以后决定哪个选项更好。但这是可能的？）

您可以使用下面的代码实现它，只需根据您的要求更新CSS即可。这是一种响应性设计，适用于所有设备

代码

<VBox class="sapUiSmallMargin">
        <f:SimpleForm 
                editable="true"
                layout="ResponsiveGridLayout"
                title="Neue Zeiterfassung anlegen"
                labelSpanXL="3"
                labelSpanL="3"
                labelSpanM="3"
                labelSpanS="12"
                adjustLabelSpan="false"
                emptySpanXL="1"
                emptySpanL="1"
                emptySpanM="1"
                emptySpanS="0"
                columnsXL="1"
                columnsL="1"
                columnsM="1"
                singleContainerFullSize="false" >
            <f:content>
                <Label text="Auftrag" tooltip="Auftrag eingeben" />
                <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
                    <core:ListItem text="{Aufnr}"/>
                </ComboBox>
                <Label text="Datum" labelFor="DP3"/>
                <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy"/>
                <Label class="font1" text="Dauer"/>
                <Input value="Street">
                    <layoutData>
                        <l:GridData span="XL7 L7 M7 S10" />
                    </layoutData>
                </Input>
                <Button icon="sap-icon://sys-help"  press="onPress" >
                    <layoutData>
                        <l:GridData span="XL1 L1 M1 S2" />
                    </layoutData>
                </Button>
                <Label text="Arbeitsbeschreibung"/>
                <TextArea id="beschreibung"/>
            </f:content>
        </f:SimpleForm>
    </VBox>

更新：随着中的更改（从UI5 1.84开始提供），可以通过

valuehelpiconsc

更改值帮助图标：

在这种情况下，无需扩展

sap.m.InputBase

。其他输入控件，如

sap.m.MaskInput

，仍需扩展，如下面链接的Plunk所示

原始答案：

最好的解决方案就像上面的数据，里面有一个小图标，我可以点击。（……）可能吗

是的，有可能。下面是一个最小的例子：

为此，UI5提供了受保护的API

addEndIcon

，这意味着只有在扩展

sap.m.InputBase

时才应使用它

作为

addEndIcon

的参数，您可以传递创建

sap.ui.core.Icon

所需的设置映射，这是高度可定制的

const icon=this.addEndIcon({
id:this.getId（）+“-questionMarkBtn”，
src:iconpol.getIconURI（“系统帮助”），
没错，
工具提示：“信息”，
按：[this.onEndButtonPress，this]，
}); // 有关更多设置，请参见sap.ui.core.Icon/properties
//icon.addStyleClass（…）；如果需要更多的定制。。

有时扩展类可能会有点过头/增加代码的复杂性

您还可以使用容器来实现输入和图标的对齐

例如，如果希望输入和图标垂直和水平居中：

这将产生如下结果：

有关更多示例，请参见（API参考位于页面顶部）。

谢谢！是的，聪明的形式。。我真的不明白。。我像你一样试过，但是有标签的东西。。我只是不明白为什么和什么时候。我也用css做了。。但是它并没有真正的反应。。我得到了一个图标，它是这样的：

\uuuuhbox0-cont0\u1{左边距：-16%！重要；}

但它没有响应。。我试着四处转转。。不要让它工作。也许你知道什么？如果我把我的窗口缩小，它就会离开我放置它的地方。我没有使用智能窗体，它只是

SimpleForm

。我只是使用

layoutData

和

l:GridData

来实现功能。您可以浏览并单击编辑图标。你到底在寻找什么？我添加了一个新的屏幕截图并更新了代码，希望你也在寻找同样的解决方案。啊，谢谢。。我觉得这是smartform。。我去试试看。。然后玩一玩。。也许你可以用自己的话解释什么是labelSpanXl，labelspanL。。。空的。。你是这样做的吗？我真的不明白。因为您在设置数据时使用了

l:GirdData span..

。。我真的不明白。而且我使用

我也更新了图标的代码，请检查一下。当谈到标签panl
的意思时，大型设备的标签跨度是多少。同样适用于超大型、M
-中型和S
-小型设备。如果您观察了不同尺寸的输出，在小型设备中，标签将显示在完整的行中。这是因为标签span=“12”。每行将有12个跨距，您只需管理跨距，以便元素应根据设备大小进行调整。因此，布局将具有响应性。
<f:SimpleForm 
    editable="true"
    layout="ResponsiveGridLayout"
    title="Neue Zeiterfassung anlegen"
    labelSpanXL="3"
    labelSpanL="3"
    labelSpanM="3"
    labelSpanS="12"
    adjustLabelSpan="false"
    emptySpanXL="1"
    emptySpanL="1"
    emptySpanM="1"
    emptySpanS="0"
    columnsXL="1"
    columnsL="1"
    columnsM="1"
    singleContainerFullSize="false" >
    <f:content>
    <Label text="Auftrag" tooltip="Auftrag eingeben" />
      <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
        <core:ListItem text="{Aufnr}"/>
          <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
          </layoutData>
      </ComboBox>
        <Label text="Datum" labelFor="DP3"/>
        <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" 
         placeholder="dd.mm.yyyy">
         <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
         </layoutData>
            </DatePicker>
             <Label class="font1" text="Dauer"/>
                <Input value="Street">
        <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
        </layoutData>
            </Input>
        <Button icon="sap-icon://sys-help"  press="onPress" width="40px" >
        <layoutData>
            <l:GridData span="XL1 L1 M1 S3" />
                </layoutData>
                    </Button>
                    <Label text="Arbeitsbeschreibung"/>
                    <TextArea id="beschreibung">
                        <layoutData>
                            <l:GridData span="XL8 L8 M7 S9" />
                        </layoutData>
                    </TextArea>
                </f:content>
            </f:SimpleForm>

<VBox class="sapUiSmallMargin">
    <f:SimpleForm 
        editable="true"
        layout="ResponsiveGridLayout"
        title="Neue Zeiterfassung anlegen"
        labelSpanXL="3"
        labelSpanL="3"
        labelSpanM="3"
        labelSpanS="12"
        adjustLabelSpan="false"
        emptySpanXL="1"
        emptySpanL="1"
        emptySpanM="1"
        emptySpanS="0"
        columnsXL="1"
        columnsL="1"
        columnsM="1"
        singleContainerFullSize="false" >
        <f:content>
            <Label text="Auftrag" tooltip="Auftrag eingeben" />
            <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
                <core:ListItem text="{Aufnr}"/>
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </ComboBox>
            <Label text="Datum" labelFor="DP3"/>
            <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </DatePicker>
            <Label class="font1" text="Dauer"/>
            <Input value="Street">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </Input>
            <HBox>
                <core:Icon src="sap-icon://sys-help" color="#031E48" press="onPress" class="infoIcon"/>
                <layoutData>
                    <l:GridData span="XL1 L1 M1 S1" />
                </layoutData>
            </HBox>
            <Label text="Arbeitsbeschreibung"/>
            <TextArea id="beschreibung">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </TextArea>
        </f:content>
    </f:SimpleForm>
</VBox>

.infoIcon {
  line-height: 3rem;
}