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