如何使用离子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文件中的所有离子项。如果您希望它仅用于一个输入框，请为离子项设置一个类并设置相应的样式。