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>

Coba »

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>

Coba »

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="[email protected]">
  </label>
</div>

Coba »

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>

Coba »

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>

Coba »

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>

Coba »

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>

Coba »

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>

Coba »