Question

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

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

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

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

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

最好的解决方案就像上面的 Datum ，里面有一个小图标，我可以单击它，或者该图标位于Dauer旁边，而Dauer和{{1} }图标。

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

Answer 1

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

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

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

作为addEndIcon的自变量，您可以传递创建高度可定制的sap.ui.core.Icon ^api所需的设置映射。 / p>
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..

Answer 2

您可以使用以下代码实现此目的，只需根据需要更新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>

输出：

如果您正在寻找以下输出

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

如果您使用的是ICON，则还需要添加样式以进行对齐

.infoIcon {
  line-height: 3rem;
}

Answer 3

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

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

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

<HBox
    alignItems="Center"
    justifyContent="Center">
    <Input>
        <layoutData>
            <FlexItemData growFactor="3" />
        </layoutData>
    </Input>
    <core:Icon
            src="sap-icon://sys-help">
        <!-- Be careful here with the namespaces (use layoutData from core, not m) -->
        <core:layoutData>
            <FlexItemData growFactor="1" />
        </core:layoutData>
    </core:Icon>
</HBox>

这将给出以下内容：

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

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

3 个答案: