bentuk dan kotak masukan ionik
daftar kelas juga dapat digunakan elemen input. item-masukan dan kategori barang menentukan kotak teks dan label.
Sifat kotak input: placeholder
Contoh berikut, default adalah 100% dari lebar (kiri dan kanan tanpa perbatasan), dan menggunakan input pesan atribut bidang placeholder set nilai yang diharapkan.
<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>
kotak input sifat: masukan-label
penggunaan input-label label ditempatkan di sebelah kiri dari masukan 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>
tab ditumpuk
Susun kotak input label biasanya terletak di kepala. Setiap opsi menggunakan item-ditumpuk-label kelas penunjukan. Setiap kotak input untuk menentukan input-label. Contoh berikut juga digunakan untuk mengatur placeholder atribut masukan informasi yang cepat.
<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>
mengambang label
label mengambang mirip tumpukan label, namun label memiliki efek animasi mengambang untuk setiap opsi yang Anda perlu menentukan kategori item-floating-label, masukkan label Anda perlu menentukan 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>
Form tertanam
Secara default, setiap lebar field input adalah 100%, tapi kita bisa menggunakan daftar daftar-inset kartu kelas atau mengatur padding form (padding), jenis kartu dengan bayangan.
<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>
field input inline
Gunakan daftar-inset set inline daftar entitas. Menggunakan item-input-inset gaya dapat menanamkan tombol.
<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>
Dengan ikon kotak input
kotak input item-masukan bisa sangat sederhana untuk menambahkan ikon. Ikon di <input> sebelum menambahkan.
<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>
Kepala kotak input
kotak input dapat ditempatkan di kepala, dan dapat menambah atau membatalkan tombol submit.
<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>