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

Question

我有一个登录表单，其中有一个电子邮件和密码input。我想要做的是输入右侧的小眼睛轮廓图标。它具有显示和隐藏 password 的功能。

但是，该功能可以正常工作。我无法得到我想要的设计。像this 这样的东西。但就我而言，我没有使用<ion-item>

这是我的 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>

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

这是结果的下图。

这是我在 scss

中输入的代码

ion-input {
  border: 5px !important;
}

.text-input-ios, .text-input-md {
    border-radius: 5px;
    border: 1px solid #efefef;
}

.text-input {
    margin: 0;
    width: calc(100% - 8px);
    padding: 13px 8px;
}

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

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

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

试试这个，

<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 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%);
}