formes ioniques et zones de saisie

list peut également être utilisée pour les éléments d'entrée. Les classes item-input et item spécifient les zones de texte et leurs étiquettes.

Attributs de la zone de saisie : espace réservé

Dans l'exemple suivant, la valeur par défaut est 100 % de largeur (pas de bordures sur les côtés gauche et droit), et l'attribut espace réservé est utilisé pour définir les informations d'invite pour la valeur attendue du champ de saisie.

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

Attributs de la zone de saisie : input-label

Utilisez input-label pour placer l'étiquette sur le côté gauche de la zone de saisie.

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

Balise d'empilage

La balise d'empilage est généralement située en tête de la zone de saisie. Chaque option est spécifiée à l'aide de la classe item-stacked-label. Chaque zone de saisie doit spécifier une étiquette d'entrée. L'exemple suivant utilise également l'attribut placeholder pour définir l'invite de saisie d'informations.

<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="john@suhr.com">
  </label>
</div>

Étiquette flottante

L'étiquette flottante est similaire à l'étiquette empilée, mais l'étiquette flottante a un effet d'animation et chaque option doit spécifier un élément - Classe d'étiquette flottante, l'étiquette d'entrée doit spécifier l'étiquette d'entrée.

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

Formulaire en ligne

Par défaut, la largeur de chaque champ de saisie est de 100 %, mais nous pouvons utiliser list list-inset ou The card class sets le remplissage du formulaire, La classe de cartes a une ombre.

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

Champ de saisie en ligne

Utilisez list-inset pour définir la liste des entités en ligne. Utilisez le style item-input-inset pour 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>

Zone de saisie avec icône

item-input La zone de saisie peut facilement ajouter des icônes. Des icônes peuvent être ajoutées avant <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>

Zone de saisie d'en-tête

La zone de saisie peut être placée dans l'en-tête et un bouton de soumission ou d'annulation peut être ajouté.

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