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>