ionic formularios y campos de entrada
La clase list también se puede usar para elementos input. Las clases item-input y item especifican el campo de texto y su etiqueta.
Atributo de campo de entrada: placeholder
En el siguiente ejemplo, el ancho predeterminado es del 100% (sin bordes en los lados izquierdo y derecho), y se utiliza el atributo placeholder para establecer información de sugerencia sobre el valor esperado del campo de entrada.
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<textarea placeholder="Comments"></textarea>
</label>
</div>
Atributo de campo de entrada: input-label
Usa input-label para colocar la etiqueta a la izquierda del campo de entrada input.
<div class="list">
<label class="item item-input">
<span class="input-label">用户名：</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">密码：</span>
<input type="password">
</label>
</div>
Etiquetas apiladas
Las etiquetas apiladas generalmente se ubican en la parte superior del campo de entrada. Cada opción se especifica con la clase item-stacked-label. Cada campo de entrada debe especificar input-label. El siguiente ejemplo también usa el atributo placeholder para establecer sugerencias de entrada de información.
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="[email protected]">
</label>
</div>
Etiquetas flotantes
Las etiquetas flotantes son similares a las etiquetas apiladas, pero las etiquetas flotantes tienen un efecto de animación. Cada opción requiere especificar la clase item-floating-label, y la etiqueta de entrada requiere especificar input-label.
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
</div>
Formulario incrustado
De forma predeterminada, cada campo de entrada tiene un ancho del 100%, pero podemos usar las clases list list-inset o card para establecer el relleno (padding) del formulario; la clase card tiene sombra.
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
</div>
Campo de entrada incrustado
Usa list-inset para configurar una lista incrustada. Usa el estilo item-input-inset para incrustar un botón.
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small">
Submit
</button>
</div>
</div>
Campo de entrada con icono
El campo de entrada item-input puede agregar iconos muy fácilmente. Los iconos se pueden agregar antes de <input>.
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
Campo de entrada en la cabecera
El campo de entrada se puede colocar en la cabecera y se pueden agregar botones de enviar o cancelar.
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="搜索">
</label>
<button class="button button-clear">
取消
</button>
</div>
Otras extensiones