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

问题描述 投票：1回答：2

如何将我的图标放在输入字段旁边或内部？ enter image description here

问题是，图标会改变表格。通常，它是这样的：enter image description here

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

有没有办法让它看起来干净而且旁边就是它？或者在输入字段里面更好？

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

最好的解决方案就像上面的Datum一样，里面有一个小图标，我可以点击或者喜欢Dauer旁边的图标，Dauer的输入字段和?图标之间没有间隙。

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

<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>
sapui5
2个回答
2
投票

最好的解决方案就像上面的Datum一样，里面有一个小图标，我可以点击它。 （...） 可能吗？

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

Extended sap.m.InputBase

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

作为addEndIcon的参数，您可以传递创建sap.ui.core.Iconapi所需的设置图，该图可以高度自定义。

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..
0
投票

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

输出：

enter image description here

如果您正在寻找以下输出

enter image description here

<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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.