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

Question

我正在尝试在 <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 中实现这种布局？

原文由 user3607282 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 user3607282 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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，这使得构建从左到右和从右到左书写方向的界面变得更加容易

原文由 DerBesondereEin 发布，翻译遵循 CC BY-SA 4.0 许可协议