Блог

Главная - Вопросы по программированию - Как разместить значок рядом с полем ввода или внутри него

Как разместить значок рядом с полем ввода или внутри него

#sapui5

#sapui5

Вопрос:

Как я могу поместить свой значок рядом с полем ввода или внутри него? введите описание изображения здесь

Проблема в том, что значок меняет форму. Обычно это выглядит так: введите описание изображения здесь

Но когда я добавляю значок (код ниже), он вытесняет поле ввода Dauer.

Есть ли способ сделать его чистым, и это рядом с ним? Или лучше в поле ввода внутри?

Я могу уменьшить кнопку с помощью CSS, но между ними все еще остается пробел .. И он не перемещается автоматически.

Лучшее решение похоже на приведенную выше базу данных с маленьким значком внутри, где я могу щелкнуть или как значок рядом с 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>

Ответ №1:

Обновление: с изменением в commit: 8f1757d , которое доступно с UI5 1.84, значение значка справки может быть изменено через valueHelpIconSrc :

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

В этом случае нет необходимости расширять sap.m.InputBase . Другие элементы управления вводом, такие как sap.m.MaskInput , все еще нуждаются в расширении, как показано в приведенном ниже разделе.

Оригинальный ответ:

Лучшее решение похоже на приведенную выше базу данных с маленьким значком внутри, на который я могу нажать. (…) Возможно ли это?

Да, это возможно. Вот минимальный пример: https://embed.plnkr.co/EzlF2tkvalJWvSEn

Расширенная база данных sap.m.InputBase

Для этого UI5 предоставляет защищенный 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, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..

Ответ №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>

Если вы используете значок, вам также необходимо добавить стиль для выравнивания

 .infoIcon {
  line-height: 3rem;
}

Комментарии:

1. Спасибо! да, это умная форма.. я действительно не понимаю.. я пробую, как и вы, но проблема с labelspanXL и и.. я просто не понимаю, почему и когда. Я сделал это также с помощью css.. Но на самом деле он не реагирует.. я получил значок и сделал его таким: #__hbox0-cont0_1{ margin-left: -16% !important; } но он не реагирует.. я пытаюсь немного обойти.. не получается заставить это работать. Может быть, вы что-нибудь знаете? Если я уменьшу размер своих окон, они переместятся с того места, где я их размещаю.

2. Я не использую smart form, это SimpleForm только. Я просто использую layoutData with l:GridData для достижения функциональности. Вы можете просмотреть образцы и нажать значок редактирования. Что именно вы ищете?

3. Я добавил новый скриншот и обновил код, надеюсь, вы ищете то же решение.

4. аааа, спасибо.. я думал, что это smartform .. я попробовал .. и немного поиграл.. может быть, вы можете объяснить своим собственным словом, что такое labelSpanXl, labelspanL … empty .. и так далее? я действительно не понимаю. потому что вы используете l:GirdData span.. место, где вы устанавливаете свои данные .. и я действительно этого не понимаю. А также я использую <core:Icon вместо кнопки, но это должно работать следующим образом. Я действительно ценю ваше время и помощь

5. Я также обновил свой код для значка, пожалуйста, ознакомьтесь с ним. Когда дело доходит до labelspanL средств — каким будет диапазон меток для больших устройств. То же самое относится к XL очень большим, M средним и S маленьким устройствам. Если вы наблюдаете за выводом для разных размеров, на небольших устройствах метка будет отображаться в виде полной строки. Это из-за labelSpanS="12" . Каждая строка будет иметь 12 интервалов, вы просто управляете интервалами, чтобы элементы регулировались в зависимости от размеров устройства. Таким образом, макет будет адаптивным.

Ответ №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 доступна вверху страницы).