javascript - Ionic 3，右侧使用网格在 ionic 输入中带有图标

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