Javascript Ionic 3，右侧离子输入内有图标，使用网格

我有一个登录表单，它有电子邮件和密码

输入

。我要做的是在输入的右侧有一个小眼睛轮廓图标。具有显示和隐藏密码的功能

但是，该功能正在完全工作。我无法得到我想要的设计。差不多。但就我而言，我没有使用

这是我在html中的代码

    <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>

如果有人能帮忙，我将不胜感激。 提前谢谢。

试试这个

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

如果您使用的是网格，请尝试此

<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>

试试这个

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

如果您使用的是网格，请尝试此

<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>

---

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

<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>

---

这里是链接

对于那些在这里登陆的人，我尝试在一个按钮中添加图标，它起作用了。 我的代码：

<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>

---

这是链接

尝试过，但图标不在输入字段中。它显示在colcan的下方或外部。请附上屏幕截图，但图标不在输入字段中。它显示在屏幕下方或外部。请附上屏幕截图。我试过了，但眼睛图标在输入字段之外。您可以将边框添加到离子行，而不是文本输入。为ion行指定自定义类名并添加边框样式。我尝试过，但眼睛图标不在输入字段中。您可以向ion行添加边框，而不是文本输入。为ion行指定自定义类名并向其添加边框样式。