gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:12:53 26 4
gpt4 key购买 nike

我有一个登录表单,其中包含电子邮件密码 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>

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

下面是结果的图片。

enter image description here

这是我在 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;
}

感谢有人能提供帮助。提前致谢。

最佳答案

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

<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

关于javascript - Ionic 3,右侧使用网格在 ionic 输入中带有图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51701570/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com