ionic Formulare und Eingaben
Die list-Klasse kann auch für input-Elemente verwendet werden. Die Klassen item-input und item geben das Textfeld und seine Beschriftung an.
Input-Eigenschaft: placeholder
Im folgenden Beispiel ist die Standardbreite 100% (keine Ränder auf der linken und rechten Seite), und das placeholder-Attribut wird verwendet, um einen Hinweis für den erwarteten Wert des Eingabefelds festzulegen.
<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>
Input-Eigenschaft: input-label
Verwenden Sie input-label, um die Beschriftung links vom Eingabefeld zu platzieren.
<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>
Gestapelte Beschriftungen
Gestapelte Labels werden normalerweise oben im Eingabefeld platziert. Jedes Element wird mit der Klasse item-stacked-label angegeben. Jedes Eingabefeld benötigt input-label. Das folgende Beispiel verwendet außerdem das Attribut placeholder, um Eingabehinweise festzulegen.
<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>
Schwebende Labels
Schwebende Labels ähneln gestapelten Labels, aber schwebende Labels haben einen Animationseffekt. Jedes Element benötigt die Klasse item-floating-label, und Eingabelabels benötigen 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>
Inset-Formulare
Standardmäßig hat jedes Eingabefeld eine Breite von 100%, aber wir können die Klassen list, list-inset oder card verwenden, um den Innenabstand des Formulars festzulegen. Die Klasse card enthält einen Schatten.
<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>
Inset-Eingabefelder
Verwenden Sie list-inset, um eine Inset-Liste festzulegen. Verwenden Sie den Stil item-input-inset, um eine Schaltfläche einzubetten.
<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>
Eingabefelder mit Icons
Icons können einfach zu item-input-Eingabefeldern hinzugefügt werden. Icons können vor dem <input> platziert werden.
<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>
Header-Eingabefelder
Das Eingabefeld kann im Header platziert werden, und eine Senden- oder Abbrechen-Schaltfläche kann hinzugefügt werden.
<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>
Andere Erweiterungen