formes et des boîtes d'entrée ionique

liste de classe peut également être utilisé des éléments d'entrée. point d'entrée et de la catégorie de l'article spécifie la zone de texte et son étiquette.

Boîte d'entrée propriétés: espace réservé

L'exemple suivant, la valeur par défaut est de 100% de la largeur (gauche et droite sans bordure), et en utilisant le jeu d'attributs champ d'espace réservé valeur attendue d'entrée de message.

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

Essayez »

Propriétés de la boîte d'entrée: entrée-label

l'utilisation des entrées-étiquette de l'étiquette placée sur la gauche de l'entrée de la boîte d'entrée.

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

Essayez »

onglets empilés

Empilement zone de saisie de l'étiquette se trouve généralement sur la tête. Chaque option utilise la classe désignation article empilés label. Chaque zone de saisie pour spécifier l'entrée-étiquette. Les exemples suivants sont également utilisés pour définir l'espace réservé attribut invite d'entrée de l'information.

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

Essayez »

étiquette flottante

étiquette similaire flottant empiler l'étiquette, mais l'étiquette a un flottant des effets d'animation pour chaque option, vous devez spécifier la catégorie élément flottant label, entrez l'étiquette que vous devez spécifier entrée-étiquette.

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

Essayez »

Formulaire intégré

Par défaut, chaque largeur de champ d'entrée est de 100%, mais on peut utiliser la liste liste-encart carte de classe ou d'un ensemble de rembourrage de la forme (padding), type de carte avec des ombres.

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

Essayez »

champ de saisie Inline

Utiliser la liste-encart ensemble inline liste des entités. Utilisez point-entrée-encart styles peuvent intégrer un bouton.

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

Essayez »

Avec la boîte d'entrée icône

zone de saisie élément d'entrée peut être très simple d'ajouter des icônes. Icône dans la <input> avant d'ajouter.

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

Essayez »

Le chef de la zone de saisie

zone de saisie peut être placé dans la tête, et peut ajouter ou annuler bouton soumettre.

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

Essayez »