Formulaires et entrées ionic
La classe list peut également être utilisée pour les éléments d'entrée. Les classes item-input et item spécifient la zone de texte et son libellé.
Propriété d'entrée : placeholder
Dans l'exemple suivant, la largeur par défaut est de 100% (pas de bordures sur les côtés gauche et droit), et l'attribut placeholder est utilisé pour définir une indication sur 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>
Propriété d'entrée : input-label
Utilisez input-label pour placer le libellé à gauche du champ 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>
Libellés empilés
Les libellés empilés sont généralement placés en haut du champ de saisie. Chaque élément est spécifié avec la classe item-stacked-label. Chaque champ de saisie nécessite un input-label. L'exemple suivant utilise également l'attribut placeholder pour définir les indications de saisie.
<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>
Libellés flottants
Les libellés flottants sont similaires aux libellés empilés, mais les libellés flottants ont un effet d'animation. Chaque élément a besoin de la classe item-floating-label, et les libellés de saisie nécessitent 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>
Formulaires encastrés
Par défaut, chaque champ de saisie a une largeur de 100%, mais nous pouvons utiliser les classes list, list-inset ou card pour définir le rembourrage du formulaire. La classe card inclut 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>
Champs de saisie encastrés
Utilisez list-inset pour définir une liste encastrée. 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>
Champs de saisie avec icônes
Les icônes peuvent être facilement ajoutées aux champs de saisie item-input. Les icônes peuvent être placées avant le <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>
Champs de saisie d'en-tête
Le champ de saisie peut être placé 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>
Autres extensions