iônica formulários e caixas de entrada

lista de classe também pode ser usado elementos de entrada. Item de entrada e categoria do item especifica a caixa de texto e seu rótulo.

propriedades da caixa de entrada: espaço reservado

O exemplo a seguir, o padrão é 100% da largura (esquerda e direita, sem uma fronteira), e utilizando o conjunto de atributo de campo espaço reservado valor esperado de entrada mensagem.

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

tente »

propriedades da caixa de entrada: rótulo de entrada

utilização de rótulo de entrada do rótulo colocado no lado esquerdo da entrada de caixa 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>

tente »

abas empilhadas

Empilhamento caixa de entrada de etiqueta geralmente está localizado na cabeça. Cada opção usa designação da classe de rótulo empilhados-item. Cada caixa de entrada para especificar a entrada de rótulo. Os exemplos a seguir também são usados ​​para definir o espaço reservado atributo prompt de entrada de informações.

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

tente »

etiqueta flutuante

Similar rótulo flutuando empilhar o rótulo, mas o rótulo tem uma efeitos de animação flutuantes para cada opção que você precisa especificar categoria rótulo flutuante item, digite o rótulo que você precisa para especificar a entrada de rótulo.

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

tente »

Formulário incorporado

Por padrão, cada largura do campo de entrada é 100%, mas podemos usar a lista de cartões de classe de lista-baixo-relevo ou definir o preenchimento do formulário (estofamento), tipo de cartão com 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>

tente »

campo de entrada de linha

Usar lista de entidade set em linha lista embutida. Use item a margem interna de entrada de estilos pode incorporar um botão.

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

tente »

Com ícone da caixa de entrada

caixa de entrada de ponto de entrada pode ser muito simples de adicionar ícones. Ícone do <input> antes de acrescentar.

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

tente »

A cabeça da caixa de entrada

caixa de entrada pode ser colocado na cabeça, e pode adicionar ou cancelar botão enviar.

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

tente »