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,则在编辑对焦后,该值将被清除。 当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: |
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 输入占位符的颜色 |