ionic - 在输入字段中添加一个按钮答案

【问题标题】：ionic - Adding a button inside a input fieldionic - 在输入字段中添加一个按钮
【发布时间】：2016-07-11 18:54:44
【问题描述】：

我正在尝试在<ion-input> 中添加一个按钮，但是无论我在<ion-list> 中添加的哪个位置，该按钮都不会显示在屏幕上。

我要做的是在右侧对齐的密码字段顶部显示一个“忘记”按钮。参考画面：

这是我的 HTML，

<ion-content>
  <ion-list class="au-form" inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Username"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="password" placeholder="Password"></ion-input>
            <button clear>Forgot</button>
        </ion-item>
   </ion-list>
</ion-content>

如何在 Ionic 2 中实现这种布局？

【问题讨论】：

标签： css ionic2 iconic

【解决方案1】：

在 ionic 4 中打开和关闭可见密码很简单。

您必须将插槽值提及为 end (slot="end") 以使图标与 item-end 属性一起位于末尾

<ion-item>
   <ion-label position="floating">Password</ion-label>
     <ion-input type="{{showPass ? 'text' : 'password'}}"></ion-input>
     <ion-icon item-end slot="end" name="{{showPass ? 'eye' : 'eye-off'}}" (click)="showPass=!showPass"></ion-icon>
</ion-item>

在component.ts文件中

showPass:boolean = false;

【讨论】：

【解决方案2】：

对于 ionic 4，它看起来会有些不同：

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear slot="end">Forgot</button>
</ion-item>

他们引入了 start 和 end 值，而不是 left 和 right，这使得构建从左到右和从右到左书写方向的界面变得更容易

【讨论】：

【解决方案3】：

我有类似的东西，一个禁用的输入，输入旁边有一个启用的图标按钮。这是我的 HTML：

<ion-item>
    <ion-label floating>My Label</ion-label>
    <ion-input [disabled]="true" type="text" [(ngModel)]="MyModel"></ion-input>
    <button ion-button large clear (click)="doSomething()" item-end>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-item>

所以在你的情况下，这将起作用：

<ion-item>
    <ion-label>Your Label</ion-label>
    <ion-input type="text" [(ngModel)]="yourModel"></ion-input>
    <button ion-button large (click)="doSomething()" item-end></button>
  </ion-item>

item-left 和 item-right 方向属性根据https://ionicframework.com/docs/theming/rtl-support/ 已弃用

【讨论】：

你能帮帮我吗？我尝试了第一个带有浮动标签的代码，但按钮位于输入字段上方。
@ThripthiHaridas 你能分享你的代码吗？如果你有一个ion-item，里面有一个ion-label、ion-input和一个button (ion-button)，它应该会按预期显示。并记住button上的重要属性item-end / item-right

【解决方案4】：

在最近的 Ionic 版本中已修复。在按钮上添加 item-right 有效。

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear item-right>Forgot</button>
</ion-item>

【讨论】：

【解决方案5】：

尝试使用flex:

 <ion-content>
  <ion-list class="au-form" inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Username"></ion-input>
        </ion-item>
        <ion-item>
           <div style="display:flex">
            <ion-input type="password" placeholder="Password"></ion-input>
            <button clear>Forgot</button>
          </div>
        </ion-item>
   </ion-list>
</ion-content>

【讨论】：