如何将Ionic图标放置在Ionic HTML移动UI的文本字段内？

Question

我正在使用输入文本字段从用户那里获取数据。同时，在文本输入标签旁边使用了一些 Ionic 图标。我需要将这些图标放置在文本字段内部，这样标签就会浮动，当用户选择或触摸该字段时，图标保持不变。

目前，标签是浮动的，但我需要将 Ionic 图标放在文本字段内部。

怎么实现呢？请帮助我解决这个问题。

.icon-input {
  display: flex;
  align-items: flex-end;
  position: absolute;
  padding-right: 10px;
  bottom: 0;
  font-size: 18px;
  min-width: 0 !important;
  text-align: left !important;
  color: #00b1ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet"/>

<ion-item>
  <ion-label color="primary" floating>Subject</ion-label>
  <ion-icon class="icon-input" name="create" item-start></ion-icon>
  <ion-input type="text" [(ngModel)]="vm.subject" placeholder="Subject" formControlName="subject" tabindex="1" (keyup)="moveFocus($event,password, false)"></ion-input>
  </ion-item>
  <div class="error-message" *ngIf="form.controls.subject.errors && (form.controls.subject.dirty || form.controls.subject.touched)">
  <p *ngIf="form.controls.subject.errors?.required">Subject is required</p>
</div>

<ion-item>
  <ion-icon class="icon-input" name="help" item-start></ion-icon>
  <ion-label color="primary" floating>Query</ion-label>
  <ion-input type="text" [(ngModel)]="vm.query" placeholder="Query" formControlName="query" tabindex="2" (keyup)="moveFocus($event,password, false)"></ion-input>
</ion-item>
<div class="error-message" *ngIf="form.controls.query.errors && (form.controls.query.dirty || form.controls.query.touched)">
  <p *ngIf="form.controls.query.errors?.required">Query is required</p>
</div>


    

- user7323971

---

你能把你的代码放到 StackBlitz 上吗？https://stackblitz.com/edit/ionic - לבני מלכה

@לבנימלכה 我不知道如何使用它。 - user7323971

Answer 1

html

  <ion-item>
    <ion-label color="primary" floating>Subject</ion-label>
    <span item-right><ion-icon name="create"></ion-icon></span>
    <ion-input type="text" placeholder="Subject"></ion-input>
  </ion-item>

scss

.item-inner {
    flex-direction: row-reverse !important;
  }
  ion-icon {
    color: black !important;
    margin: 15px -13px -33px 0 !important;
    background-color: transparent;
    font-size: 27px;
    padding: 0px 7px 12px 0px;
  }

- Sabyasachi Patra

---

谢谢。没有 CSS 也能正常工作。 - Vinayak Singh

Answer 2

"简单来说，在ion-input的闭合标签中放置图标，使用项目的左右位置进行定位。"

<ion-input formControlName="password" placeholder="Password">
      <ion-icon name="arrow-forward" item-right></ion-icon>
      </ion-input>

- ankita kumari

Answer 3

如何显示和隐藏密码：

<ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password" formControlName="password" #mysecretpassword>
          </ion-input>
          <ion-icon slot="end" name="eye-outline" #eye 
         (click)="togglePassword(mysecretpassword,eye)"></ion-icon>
</ion-item>


  togglePassword(ele, eye) {
    if (ele.type === 'password') {
      ele.type = 'text';
      eye.name = 'eye-off-outline'
    }
    else {
      ele.type = 'password';
      eye.name = 'eye-outline'
    }
  }

- Tendai kastande