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

Question

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

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

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

有没有一种方法可以使它看起来干净而又紧挨着呢？还是在输入字段里面更好？

我可以使用CSS将按钮缩小，但是它们之间仍然存在间隙。并且它不会自动移动。

最好的解决方案是像上面的Datum一样，其中可以单击一个小图标，或者该图标位于Dauer旁边，而Dauer的输入字段和该?图标之间没有任何间隙。

PS：我只是想要这样（我稍后会决定哪个选项更好。但是有可能吗？）

<form:SimpleForm id="neuezeiterfassung"
  editable="true"
  title="Neue Zeiterfassung anlegen"
>
  <Label
    text="Auftrag"
    class="font1"
    tooltip="Auftrag eingeben"
  />
  <l:VerticalLayout>
    <ComboBox id="Auftrag"
      items="{/ZAUFKSet}"
      showSecondaryValues="true"
      width="50%"
    >
      <core:ListItem text="{Aufnr}" />
    </ComboBox>
  </l:VerticalLayout>
  <Label
    text="Datum"
    class="font1"
  />
  <DatePicker id="DP3"
    valueFormat="dd.MM.yyyy"
    displayFormat="medium"
    width="50%"
    placeholder="dd.mm.yyyy"
  />
  <Label class="font1" text="Dauer" />
  <Input id="dauer"
    class="dauer"
    placeholder="Dauer eingeben ... "
    width="50%"
  />
  <HBox class="sapUiSmallMargin">
    <core:Icon
      src="sap-icon://sys-help"
      class="size1" color="#031E48" press="aseads"
    >
      <core:layoutData>
        <FlexItemData growFactor="1" />
      </core:layoutData>
    </core:Icon>
  </HBox>
  <!-- <Button icon="sap-icon://sys-help"  class="myButton"/> -->
  <Label class="font1" text="Arbeitsbeschreibung" />
  <TextArea id="beschreibung" width="50%" />
</form:SimpleForm>

Answer 1

最好的解决方案就像上面的基准面，在其中可以单击的小图标。（...） 可能吗？

是的，有可能。这是一个最小的示例：https : //embed.plnkr.co/EzlF2tkvalJWvSEn

为此，UI5提供了受保护的API addEndIcon^api，这意味着仅应在扩展时使用它！sap.m.InputBase

作为的参数addEndIcon，您可以传递高度可定制的创建sap.ui.core.Icon^api所需的设置映射 。

const icon = this.addEndIcon({
  id: this.getId() + "-questionMarkBtn",
  src: IconPool.getIconURI("sys-help"),
  noTabStop: true,
  tooltip: "Information",
  press: this.onEndButtonPress.bind(this),
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..