带有离子的图标内部的Ionic 3，在右侧使用网格输入

Question

我有一个登录表单，其中包含电子邮件和密码 insert into s_unpackingtmc(no, "unique", partno, boxs, pcs, modul, p_lane) VALUES (@Column1, @Column2, @Column3, @Column4, @Column5, @Column6, @Column7) 。我想做的是在输入的右侧显示一个小眼睛轮廓图标。该功能可以显示和隐藏 input。

该功能可以正常使用。我无法获得想要的设计。类似于this。但就我而言，我没有使用password

这是我的 html

中的代码

<ion-item>

我试图用它做任何事情，但最终弄乱了它。因为我的输入有边框。

这是结果下面的图像。

这是我在 scss

中输入的代码

    <ion-row class="p-l-4">
          <ion-col col-12 class="col-static">
            <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<!-- Small button icon of eye goes here -->
          </ion-col>
        </ion-row>

感谢有人可以帮助您。 预先感谢。

Answer 1

尝试一下

<ion-item>
   <ion-icon name='eye' item-right></ion-icon>
   <ion-input type="password" formControlName="password" placeholder="Password" required></ion-input>
</ion-item>

如果您使用的是Grid，请尝试此操作。

<ion-grid>
   <ion-row>
      <ion-col col-md-10>
         <ion-input type="email" id="login_email" name="email" formControlName="email" placeholder="Email" required></ion-input>
      </ion-col>
      <ion-col col-md-2>
         <ion-icon name='eye'></ion-icon>
      </ion-col>
   </ion-row>
</ion-grid>

Answer 2

对于那些登陆这里的人，我尝试将图标添加到它起作用的按钮内。 我的代码：

<ion-item id="location">
  <ion-input [(ngModel)]="searchLocation" type="text" placeholder="Enter / Select Location" (ionChange)=segmentChanged($event)></ion-input>
  <button class="find-me" clear item-right icon-only>
    <ion-icon name="pin"></ion-icon>
  </button>
</ion-item>

这里是链接Right align a button inside an ion-input

Answer 3

 <ion-row class="p-l-4">
    <ion-col col-12 class="col-static">
       <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<ion-icon name='eye' class="eye-icon" item-right></ion-icon>
        </ion-col>
   </ion-row>

.col-static{
  position:relative;
}

.col-static .eye-icon {
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
}