如何使用ionic 2获取框输入字段和框内的小图标？

Question

我想显示输入框，但我要显示线，我也想在框内显示小图像图标，而我只显示线。

以下是我应该尝试获得的屏幕：

以下是我尝试过的代码：

<ion-input type="number"
           place holder="Credit Card number"
           pattern="[0-9]{16}"></ion-input>

Answer 1

尝试：

<ion-item>
    <ion-input type="number" place holder="Credit Card number"  pattern="[0-9]{16}"></ion-input>
    <ion-icon name="your_icon_name" item-right primary></ion-icon>
</ion-item>

编辑：对于样式，您可以在相应的scss文件中进行设置

     ion-item {
             border-radius: 30px !important;
             border: 1px solid #ffffff;
/*other attributes*/
    }

以上样式适用于html文件中的所有离子项目。 如果只希望将其用于一个输入框，请为离子项目设置一个类并设置相应的样式。