如何在输入字段旁边或内部放置图标 [英] How to place icon next to or within input field

问题描述

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

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

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

有没有办法让它看起来干净而且就在它旁边?还是在输入框里面更好?

我可以使用 CSS 使按钮变小，但它们之间仍然存在间隙.而且它不会自动移动.

最好的解决方案是像上面的 Datum 一样，里面有一个小图标，我可以在其中单击，或者像 Dauer 旁边的图标一样，Dauer 的输入字段和 的输入字段之间没有间隙? 图标.

PS:我只是想要这样(我稍后会决定哪个选项更好.但有可能吗?)

--><Label class="font1" text="Arbeitsbeschreibung"/><TextArea id="beschreibung" width="50%"/></form:SimpleForm>

解决方案

更新:

为此，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: 真,工具提示:信息"，按下:[this.onEndButtonPress, this],});//更多设置见sap.ui.core.Icon/properties//icon.addStyleClass(...);如果需要更多定制..

How I can put my icon next to or within the input field?

The problem is, the icon changes the form. Usually, it's like this:

But when I'm adding the icon (code below), it displaces the Dauer input Field.

Is there a way to make it look clean and that's next to it? Or better in the input field inside?

I can make the button smaller with CSS but there is still a gap between them.. And it does not move automatically.

The best solution is like the Datum above with a small icon inside where I can click or like the icon is next to the Dauer without no gap between input field from Dauer and the ? icon.

PS: I just want it like this (I will decide then later which option is better. But it is possible?)

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

解决方案

Update: with the change in commit:8f1757d, which is available since UI5 1.84, the value help icon can be changed via valueHelpIconSrc:

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

No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown in the linked Plunk below.

---

Original answer:

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

Yes, it's possible. Here is a minimal example: https://embed.plnkr.co/EzlF2tkvalJWvSEn

For this, UI5 provides the API addEndIcon^api which is protected, meaning it should be used only when extending sap.m.InputBase!

As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Icon^api, which is highly customizable.

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

这篇关于如何在输入字段旁边或内部放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！