formas y cuadros de entrada iónica

lista de clase también se puede utilizar elementos de entrada. Categoría del artículo item-entrada y especifica el cuadro de texto y su etiqueta.

Propiedades de cuadro de entrada de marcador de posición:

En el siguiente ejemplo, el valor predeterminado es 100% de la anchura (a la izquierda y la derecha sin una frontera), y utilizando el conjunto de atributo de campo marcador de posición valor esperado de entrada de mensajes.

<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>

Trate »

Propiedades de cuadro de entrada: entrada de etiqueta

el uso de la etiqueta de entrada de la etiqueta a la izquierda de la entrada de la caja de entrada.

<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>

Trate »

fichas apiladas

Apilar cuadro de entrada etiqueta se encuentra normalmente en la cabeza. Cada opción utiliza la designación de clase de elemento de etiqueta-apilada. Cada cuadro de entrada para especificar la entrada de etiqueta. Los siguientes ejemplos también se utilizan para establecer el marcador de posición de atributo de petición 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>

Trate »

sello flotando

sello flotando similares apilar la etiqueta, pero la etiqueta tiene una flotantes efectos de animación para cada opción tiene que especificar la categoría del tema flotante de etiqueta, escriba la etiqueta tiene que especificar la entrada de etiqueta.

<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>

Trate »

Formulario incrustado

Por defecto, el ancho de cada campo de entrada es de 100%, pero podemos utilizar la lista de tarjetas de clase lista inserción o establecer el relleno de la forma (relleno), tipo de tarjeta con sombras.

<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>

Trate »

campo de entrada de línea

Utilice la lista-inserción lista de entidades que figura en línea. A través del punto de entrada-inserción-estilos puede 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>

Trate »

Con la caja de entrada icono

cuadro de entrada-elemento de entrada puede ser muy simple de añadir iconos. Icono de la <input> antes de añadir.

<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>

Trate »

El jefe de la caja de entrada

Campo de entrada se puede colocar en la cabeza, y puede añadir o cancelar botón de envío.

<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>

Trate »