Najlepszy samouczek jonowe formy i pudełka wejściowe W 2024 r. W tym samouczku możesz dowiedzieć się ułożone wypustki,pływające etykiety,Formularz do wbudowania,Pole wejściowe Inline,Z ikoną pole wprowadzania,Szef polu tekstowym,
Lista klasa może być również wykorzystywane elementów wejściowych. poz-input i kategoria poz określa pole tekstowe i jego etykietę.
Poniższy przykład, domyślnie jest 100% szerokości (lewy i prawy bez obramowania), a za pomocą zestawu atrybutów zastępczy pola oczekiwaną wartość wejściową komunikat.
<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>
Zastosowanie nadawczo-etykieta etykiety umieszczonej po lewej stronie wejścia pola.
<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>
Stacking pole wprowadzania etykiety znajduje się zazwyczaj na głowie. Każda opcja używa określenia klasy poz-ułożone-label. Każde pole wejściowe do określenia nakładów i etykietę. Poniższe przykłady służą również do ustaw atrybut zastępczy wiersza wejściowego informacji.
<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>
Podobny pływających Etykieta stosu etykietę, ale etykieta ma pływającego efekty animacji dla każdego wariantu trzeba określić kategorię poz-floating-label, wprowadź etykietę trzeba określić Input-etykietę.
<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>
Domyślnie każda szerokość pola wejściowego wynosi 100%, ale możemy użyć listy list-wstawka klasy karty lub ustawić dopełnienie w postaci (dopełnienie), typ karty z cieniami.
<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>
Użyj list-wstawka listę podmiotów zamieszczony inline. Użyj punkt-input-wstawka style można osadzić przycisk.
<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>
pole wprowadzania poz-wejściowy może być bardzo proste, aby dodać ikony. Ikona w <input> przed dodaniem.
<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>
Pole wejściowe mogą być umieszczone w głowicy i może dodać lub anulować przycisk Prześlij.
<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>