最后带有图标的离子输入

Question

    <ion-input placeholder="Username" formControlName="userName" class="primary-input"></ion-input>
     
         <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off"  class="primary-input"> 
        <ion-icon name="eye"  (click)="togglePasswordMode()"  ></ion-icon>
        </ion-input>
  <div class="ion-margin-top">
    <ion-button expand="block" (click)="!isSubmitted && login()" >LOGIN</ion-button>
  </div>
       
 The above is my code currenty showing like this

目前在开头显示图标，但我需要在结尾显示..

我尝试了带有 slot="end" 的 ion-item 作品，但我不想使用该文本框，因为文本框显示在右侧。我需要一些不使用 ion-item 的替代解决方案..

我正在使用 ionic 5 ..请一些对 css 的帮助 编辑：

.primary-input {
    background: aliceblue;
    color: #999999;
    border-radius: 5px;
    margin-bottom: 10px;
}

编辑： 这是 ion-item 的输出

Answer 1

用ion-item 包装您的代码，将ion-icon 放在ion-input 之外，它会变成这样：

  <ion-item>
    <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off" class="primary-input"></ion-input>
    <ion-icon name="eye" (click)="togglePasswordMode()"></ion-icon>
  </ion-item>

这就是它现在的样子：

编辑：

要修复多个输入的先前行为，我建议使用 ion-grid、ion-row、ion-col 布局组件。

这是代码

<ion-grid class="m-0">
    <ion-row>
      <ion-col>
        <ion-input placeholder="Username" formControlName="userName" class="primary-input"></ion-input>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off" class="primary-input"></ion-input>
      </ion-col>
      <ion-icon name="eye" class="m-auto" (click)="togglePasswordMode()"></ion-icon>
    </ion-row>
  </ion-grid>

这就是它现在的样子

希望这会有所帮助。

Answer 2

通常我们在按钮中使用与ion-input 字段分开的图标。所以可以以ion-item上的边框为例。

HTM 文件：

      <form #loginForm="ngForm" class="access" (submit)="login(model)">
        <ion-list lines="none">
          <ion-item>
            <ion-label position="floating">EMAIL</ion-label>
            <ion-input type="text" name="email" [(ngModel)]="model.email"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label position="floating">PASSWORD</ion-label>
            <ion-input type="password" name="psw" [(ngModel)]="model.psw"></ion-input>
            <ion-button slot="end" fill="clear" (click)="showPassword()" class="seeClient">
              <ion-icon *ngIf="showPsw==true" name="eye-outline" color="warning" class="iconEye"></ion-icon>
              <ion-icon *ngIf="showPsw==false" name="eye-off-outline" color="warning" class="iconEye"></ion-icon>
            </ion-button>
          </ion-item>
        </ion-list>
        <ion-button [disabled]="!mobile" expand="block" type="submit" color="warning">Entrar</ion-button>
      </form>

SCSS 文件：

.iconEye {
    font-size: 24px;
    padding-left: 4px;
    padding-top: 12px;
    vertical-align: middle;
}

ion-item {
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #eac402;
    --highlight-height: 0px;
    --highlight-color-valid: #eac402;
    --highlight-color-focused: #eac402;
    --highlight-color-invalid: #eac402;
}