ion-input在ionic中的input，带label的带icon的输入框

1.概述

ion-input is meant for text type inputs only, such as text, password, email, number,search, tel, and url. 

Ionic仍然使用组件中的一个实际的<input type =“text”> HTML元素，但是，通过Ionic包装本机HTML输入元素，它能够更好地处理用户体验和交互性。不用于非文本输入，例如复选框，收音机，切换，范围，选择等。


同样，应使用<ion-textarea>代替<textarea>。

仍然支持blur失去焦点，focus获取检点时，keyup,keydown,keypress,input等事件。

<ion-list>
  <ion-item>
    <ion-label color="primary">标签Label</ion-label>
    <ion-input placeholder="1.Input内容简单带普通labelinput"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" fixed>电话号码</ion-label>
    <ion-input type="tel" placeholder="2.电话号码类型"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="number" placeholder="3.没有label的数字输入框"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>email</ion-label>
    <ion-input type="email" placeholder="4.Email Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>password</ion-label>
    <ion-input type="password" placeholder="5.Password Input在输入框内上浮且字小一号"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" floating>Floating Label</ion-label>
    <ion-input placeholder="6.输入内容时label向上浮动且变小"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input placeholder="7.当有内容输入时出现清除的小叉" clearInput></ion-input>
  </ion-item>

  <ion-item>
    <ion-textarea placeholder="输入一段描述类的东西"></ion-textarea>
  </ion-item>
</ion-list>

效果：

<ion-item>
<ion-label style="float:right;padding-right:0px"> <ion-icon name="logo-playstation"></ion-icon> PSN</ion-label>
    <ion-input clearInput type="text"></ion-input>
    </ion-item>

    <ion-item>
    <ion-icon item-left name="phone-portrait"></ion-icon>
    <ion-input type="text" placeholder="Mobile no"></ion-input>
    <ion-icon item-right name="contacts" ></ion-icon>

带icon的输入框ion-icon必须放在label里面才有用，放input里面是没有用的，放item里面必须加上方位限定才有用item-left或者item-right

Attr	Type	Details
autocomplete	string	Instructional text that shows before the input has a value.当输入有值的时候显示自动补全
autocorrect	string	Instructional text that shows before the input has a value.
clearInput	boolean	If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. 如果为真，当有值时，输入中将会出现一个清晰的图标。 点击它将清除输入。
clearOnEdit	boolean	If true, the value will be cleared after focus upon edit. Defaults to true when type is "password", false for all other types. 如果为true，则在编辑对焦后，该值将被清除。 当type为“password”时，默认为true，对于所有其他类型，默认为false。
max	any	The maximum value, which must not be less than its minimum (min attribute) value. 最大值不得小于其最小值（最小属性）值。
min	any	The minimum value, which must not be greater than its maximum (max attribute) value. 最小值不得大于其最大值（最大属性）值。
placeholder	string	Instructional text that shows before the input has a value. 当输入有值的时候显示提示语
readonly	boolean	If true, the user cannot modify the value. 如果为true，则用户无法修改该值。
step	any	Works with the min and max attributes to limit the increments at which a value can be set. 使用最小和最大属性来限制可以设置值的增量。
type	string	The type of control to display. The default type is text. Possible values are: "text", "password", "email","number", "search", "tel", or "url".

ass Variables

Property	Default	Description
$text-input-highlight-color-valid	#32db64	Color of the input highlight when valid 有效时输入高亮的颜色
$text-input-highlight-color-invalid	#f53d3d	Color of the input highlight when invalid 无效时输入高亮的颜色
$text-input-placeholder-color	#999	Color of the input placeholder 输入占位符的颜色