bentuk ion dan kotak input
Kelas senarai
juga boleh digunakan untuk elemen input. Input item dan kelas item menentukan kotak teks dan labelnya.
Atribut kotak input: pemegang tempat
Dalam contoh berikut, lalai ialah 100% lebar (tiada sempadan di sebelah kiri dan kanan), dan atribut pemegang tempat digunakan untuk menetapkan maklumat segera untuk nilai jangkaan medan input.
<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>
Atribut kotak input: label input
Gunakan label input untuk meletakkan label di sebelah kiri input kotak input.
<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>
Teg tindanan
Teg tindanan biasanya terletak di bahagian kepala kotak input. Setiap pilihan ditentukan menggunakan kelas item-stacked-label. Setiap kotak input perlu menentukan label input. Contoh berikut juga menggunakan atribut pemegang tempat untuk menetapkan gesaan input maklumat.
<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>
Label terapung
Label terapung adalah serupa dengan label bertindan, tetapi label terapung mempunyai kesan animasi dan setiap pilihan perlu menentukan item - Kelas label terapung, label input perlu menentukan label input.
<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>
Borang sebaris
Secara lalai setiap lebar medan input ialah 100%, tetapi kita boleh menggunakan senarai masukan senarai atau Set kelas kad pelapik borang, Kelas kad mempunyai bayang-bayang.
<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>
Medan input sebaris
Gunakan inset senarai untuk menetapkan senarai entiti sebaris. Gunakan gaya item-input-inset untuk membenamkan butang.
<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>
Kotak input dengan ikon
Kotak input item-input boleh menambah ikon dengan mudah. Ikon boleh ditambah sebelum <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>
Kotak input pengepala
Kotak input boleh diletakkan di dalam pengepala dan butang hantar atau batal boleh ditambah.
<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>