如何使用離子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文件中的所有離子項目。如果您希望僅用於一個輸入框，請爲離子項設置一個類並設置相應的樣式。