sapui5 - 如何在输入字段旁边或之内放置图标

Question

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

问题是，图标改变了形式。通常，它是这样的:

但是当我添加图标(下面的代码)时，它会取代 Dauer 输入字段。

有没有办法让它看起来很干净，而且就在它旁边？还是在input field里面更好？

我可以使用 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

更新: commit:8f1757d 中的更改，从 UI5 1.84 开始可用，值帮助图标可以通过 valueHelpIconSrc 进行更改:

<Input showValueHelp="true"
  <strong>valueHelpIconSrc="sap-icon://sys-help"</strong>
  valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available <strong>since 1.84.0</strong> -->

在这种情况下不需要扩展 sap.m.InputBase。 sap.m.MaskInput 等其他输入控件仍需要扩展，如下面链接的 Plunk 所示。

---

原答案:

The best solution is like the Datum above with a small icon inside where I can click. (...) Is it possible?

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

为此，UI5 提供了 API addEndIcon ^api 是 protected ，这意味着它应该仅在扩展 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, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..